vue 企业发展历程动画_动画 VUE基础回顾8

过渡和动画

使用 组件包裹

例：　　

过渡动画

style：.fade-enter-active, .fade-leave-active {transition: opactiy .5s}

.fade-enter, .fade-leave-to{opacity:0;}

以上切换v-if的状态能够让div元素渐显渐隐，而不是直接添加删除

原理是VUE通过tansition组件的name属性值，然后使用它在过渡的各个节点为包含的元素添加类名。当元素被添加到文档或者从文档中移除时，会分别应用enter和leave两类过渡。以下是会添加的类名：

{name}-enter(常用):这个类名会在元素被插入DOM时加入，然后在下一帧立刻移除。可以使用它来设置那些需要在元素开始进入过渡时移除的CSS属性。

{name}-enter-active(常用): 在元素整个动画阶段应用。和-enter 同时被添加，然后在动画完成时被移除。适用于设置css过渡时间长度，过渡的属性和使用的曲线函数。

{name}-enter-to: 这个类名会在-enter类名从元素移除的同时添加到元素上，适合用来设置那些在元素开始进入过渡时添加的css属性，通常在-enter类上设置与之相反的过渡属性好些

{name}-leave：在离开过渡中，在离开过渡时被添加，下一帧被移除。

{name}-leave-active(常用): 在离开过渡中，用于离开过渡的整个阶段。

{name}-leave-to(常用): 在离开过渡被触发之后下一帧生效，在完成过渡之后被移除

js过渡动画

还提供用于实现的js动画钩子,这些钩子函数和用于css的