这里主要涉及概念的理解,和动画使用的步骤
效果图.gif
一.动画的生命周期
image.png
v-enter:进入之前,此时还未开始动画
v-leave-to:离开之后,此时动画已经结束
简单的说,以上都是元素消失的时期
v-enter-active/v-leave-active:动画过程
简单的说,都是元素过渡的时间
v-enter-to/v-leave:动画正常显示的时间点
简单的说,就是元素的正常状态,消失的起始点
二.步骤
1.必须将需要执行动画的元素放到Vue提供的transition组件中
2.通过Vue提供的类名设置过渡/动画相关操作v-enter,v-leave-to
3.通过Vue提供的类名设置过渡/动画相关时长v-enter-active,v-leave-active
4.只要放到transition组件中的元素显示或者隐藏发生了改变,Vue就会自动添加过渡效果
三.代码测试
1.通过按键控制盒模型的显示和隐藏
2.给和模型添加过渡动画
2.1将盒模型用transition标签包裹
2.2设置盒模型消失的最终状态
2.3设置盒模型的过渡时间(以及参与过渡的属性)
样式.png
结构.png
vm.png
