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

来源：5-6 目录功能实现（目录浮出效果）

慕函数9376773

2019-09-10

不是很清楚两个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>

写回答

2回答

慕斯6088333

2020-06-07

你可以看看你的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动画更加流畅。

Sam

2019-09-10

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

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构，完整项目流程

1610 学习 · 1951 问题

查看课程

相似问题

老师问一下，可以做跟随动画吗？

回答 2

实现翻页效果时窗口会抖动

回答 1

关于8-13节动画的执行问题

回答 2

为什么我的小箭头没有动画效果

回答 1

关于子目录的label

回答 1

打开慕课网App查看更多内容