vue学习笔记四：过渡与动画

---

一、过渡和动画基础

1、过渡

标签上没有设置name属性名，则v-就是这些类的默认前缀。推荐设置name值进行命名，这样应用到另一个过渡就不会产生冲突。

动画相比过渡来说，可以在一个声明里设置多个状态。

2、transition组件/标签

opacity：透明度

3、自定义类名

自定义类名优先级高于普通类名

使用animate：基本类名 动画类名
appear:



4、使用@keyframes创建CSS动画

transform:scale(x)：缩放x，0<=x<=1

5、钩子函数实现动画


done:代表钩子函数完成，告诉vue动画执行完成
enter、leave中，与CSS结合回调函数done是可选的，使用JavaScript时，回调函数done时必须的，否则过渡会立刻完成。

6、vue结合velocity.js实现动画



配置：complete:done

二、多个元素过渡

1、不同标签名元素过渡

transition同一时间，只能对一个元素进行过渡。

2、相同标签名元素过渡


3、过渡模式

三、多个组件过渡

is属性绑定，is属性用于根据组件名称不同切换显示不同的组件控件。
javascript:;用于阻止HTML跳转

四、列表过渡

1、列表过渡

tag属性修改默认标签，否则使用transition下的标签。
列表每一项都需要进行过渡，列表在循环时要给每一个列表项添加唯一的key属性，才会有过渡效果。

splice()：增加或替换
2、列表的排序过渡




3、列表的交错过渡（延迟过渡）

☆列表的交错过渡通过自定义data属性处理
JS中的迭代函数filter遍历数组中的每一项，返回查找后结果。
4、可复用的过渡



☆插槽占位


☆render渲染
★on:{}为事件监听器，将所有的钩子函数都放在这里。

课后题：
1．请简述 JavaScript钩子函数包括哪些。

beforeEnter
enter
afterEnter
enterCancelled
beforeLeave
leave
afterLeave
leaveCancelled
2．请简述 6 个内置的过渡类名。

v-enter，元素插入前
v-enter-active，插入过程中
v-enter-to，元素插入后，与此同时 v-enter 被移除
v-leave，离开前
v-leave-active，离开中
v-leave-to，离开后
3．请简述自定义过渡类名的属性有哪些。

enter-class
enter-active-class
enter-to-class
leave-class
leave-acitve-class
leave-to-class