8体系化Vue再学习——vue动画

过渡与动画

简单的动画实现原理

1、设置动画效果

2、定义动画样式

3、通过定义class来设置动画

系统提供的方案

系统提供的默认动作：

 需要进行动画的部分通过transition包裹

注意：这里的v-leave-active是针对transition包裹的默认的动作

给动画命名：

针对一些定制化的动画，我们需要给动画命名

 默认是v-，命名之后动作需要同步命名

appear属性 

appear：是否在加载的时候就执行动画。也可简写为：

动画的过度效果

 对于相同的内容，我们可以进行合并

Transition-group多元素过度

对于有同样动画需求的组件，我们用transition包裹是不对的，一个transition只能包裹一个组件

 若有多个组件，我们通过transition-group进行包裹，需要注意的是，这里我们一定通过key进行标记

对于v-for下包裹的组件，我们transition-group需要这么用

第三方动画框架animate.css

1、导入animate.css

2、在transation上直接写过度动画和效果

 注意通过官网动画展示，我们选定我们需要的动画

动画总结