vuejs 过渡动画 头部抖动问题

Question

header是绝对定位，每次动画调整，都有抖动一下，请问问题何在

    <div id="app" :class="deviceClass">
        <transition name="page" mode="out-in">
             <router-view class="page"></router-view>
        </transition>
    </div>

    <style scoped>
        .page-enter-active,
        .page-leave-active,
        .ios-device .page-enter-active,
        .ios-device .page-leave-active {
          -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
          -webkit-transition-timing-function: cubic-bezier(.36, .66, .04, 1);
          transition-timing-function: cubic-bezier(.36, .66, .04, 1);
          -webkit-transition-property: opacity, -webkit-transform;
          transition-property: opacity, transform;
        }
        
        .android-device .page-enter-active,
        .android-device .page-leave-active {
          -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
          -webkit-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
        }
        
        [transition-direction="forward"] .page-enter {
          -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
          opacity: 1;
          z-index: 2;
        }
        
        [transition-direction="forward"] .page-enter-active {
          box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        }
        
        [transition-direction="forward"] .page-enter-to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1;
          z-index: 2;
        }
        
        [transition-direction="forward"] .page-leave {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 0.8;
          z-index: 1;
        }
        
        [transition-direction="forward"] .page-leave-to {
          -webkit-transform: translate3d(-33%, 0, 0);
          transform: translate3d(-33%, 0, 0);
          opacity: 0;
          z-index: 1;
        }
        
        [transition-direction="back"] .page-enter {
          -webkit-transform: translate3d(-33%, 0, 0);
          transform: translate3d(-33%, 0, 0);
          opacity: 0.8;
          z-index: 1;
        }
        
        [transition-direction="back"] .page-enter-to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1;
          z-index: 1;
        }
        
        [transition-direction="back"] .page-leave {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1;
          z-index: 2;
        }
        
        [transition-direction="back"] .page-leave-active {
          box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        }
        
        [transition-direction="back"] .page-leave-to {
          -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
          opacity: 1;
          z-index: 2;
        }


</style>

Answer 1

加上这个样式就行了

.main, .page {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

Answer 2

你用了fixed吧，fixed在transform时失效，可在动画进行过程中，用absolute覆盖掉fixed

Answer 3

消失的元素加个 position: absolute;

Answer 4

我也遇到这个问题了，坐等答案