目录滑动动画只有fade没有右滑效果

Question

不是很清楚两个transition嵌套的原理

<transition name="fade">
    <div class="slide-content-wrapper" v-show="menuvisible && setvisible === 3">
        <transition name="slide-right">
            <div class='content' v-if="setvisible === 3"></div>
        </transition>
        <div class="content-bg" @click="hideMenuTitle()"></div>
    </div>
</transition>

Answer 1

慕斯6088333 2020-06-07 01:08:35

你可以看看你的scss样式是否正确

.slide-right-enter, .slide-right-leave-to {
  transform: translate3d(-100%,0,0);
}

.slide-right-enter-to, .slide-right-leave {
  transform: translate3d(0,0,0);
}


.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 1;
}

.slide-right-enter-active, .slide-right-leave-active, 
.fade-enter-active, .fade-leave-active {
  transition: all .3s linear;
}

外层fade控制透明度。 内层控制移动动画。这样比一层的transition动画更加流畅。

Answer 2

Sam 2019-09-10 23:10:06

第一个 transition 的用途是调用逐步变暗的动画，第二个 transition 调用向右滑动的动画，这两个动画对应两个 css，transition 执行时会动态改变包裹 div 的 class 属性，然后我们设置对应 class 的 transition 属性，就达到了动画效果，动画都定义在 transition.scss 中。