动画效果可以提升网页整体的“酷炫感”,而Vue中有特有的一些制作动画效果的方法
原理
Vue里的动画是这样被创建出来的:
1.所有需要有动画效果的标签,全部放在transition标签中,transition标签添加一个name属性(默认值为v)
2.动画分为进入(enter)、离开(leave)两部分,每一部分又分为开始(enter/leave)、中间(enter-active/leave-active)以及结束(enter-to/leave-to)
3.动画开始执行时,给该元素添加上enter和enter-active两个class(对leave也一样)
4.第二帧时,元素的enter这个class被移除,enter-to这个class被添加上(对leave也一样)
5.动画执行完成后,enter-to和enter两个标签都被移除(对leave也一样)