过渡动画

来源：4-9 字体设置弹窗UI实现

慕斯卡316423

2020-08-14

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

写回答

1回答

扬_灵

2020-08-16

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

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

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

1610 学习 · 1951 问题

查看课程

相似问题

移出分组的过渡动画问题

回答 3

关于动画执行的问题

回答 2

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

回答 2

为什么移出分组的过渡动画没有效果？

回答 2

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

回答 1

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