过渡动画

Question

老师 您好！
这个字体弹窗组件的过渡动画中，初始状态enter和leave-to为什么要设置translate3d(0,100%,0)，结束状态enter-to和enter为什么要设置translate3d(0,0,0)？

Answer 1

扬_灵 2020-08-16 13:52:16

同学你好，v-enter定义进入过渡的开始状态，v-enter-to定义进入过过渡的结束状态，v-leave-to是定义离开过渡的结束状态，v-leave定义离开过渡的开始状态。当过渡动画开始进入的时候是从下向上移动100%的，透明度也是从0到1，等到离开的时候正好相反，透明度是从1到0的效果。如果不能解决你的问题，可以继续追问。