最近我整理了一下vue2的一些过渡效果。来总结到这里。
vue 为我们封装了transition 组件 ,可以给任何元素添加enter 和leave
条件渲染 : v-if
条件展示 :v-show
动态组件
组件根节点
一、单元素过渡
- 一般需要过渡的元素要放在
<transition> <transition>
组件中 ,过渡有四个状态
①. enter 元素进入时第一帧的状态
②. enter-active 元素从进入第一帧后到完成过渡的这一过程的状态
③. leave 元素离开时的第一帧状态
④. leave-active 元素离开第一帧后到完成过渡的这一过程的状态
列如:
2 . css过渡
HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
CSS
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
3.我们也可以设置css动画
只需要将上变得css代码改为
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
4.自定义过渡类
自定义过渡类就不需要 中的name属性了。类名可以是自己随意起,也可引入第三方动画库animate.css, 但是需要在 加入一些添加类名的属性
enter-class=类名
enter-active-class=类名 (常用)
leave-class=类名
leave-active-class=类名 (常用)
在引入第三方动画库 animate.css 时 以上属性要先添加 animated 类, 在添加 动画类名,例如:
enter-class=”animated hinge “
CSS
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
5.JavaScript 过渡 钩子
① before-enter
② enter
③ after-enter
④ enter-cancelled (在 v-show 中应用)
⑤ before-leave
⑥ leave
⑦ after-leave
⑧ leave-cancelled (在 v-show 中应用)
当只用 JavaScript 过渡的时候, 在 enter 和 leave 中,回调函数 done 是必须的 。
否则,它们会被同步调用,过渡会立即完成。
例如
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
二、多元素过渡
1.实现多个元素过渡用
① v-if 和 v-else 或 v-else-if (两个相邻元素要求不一样)
省略了CSS
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
② 利用 属性 key (推荐)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
③ v-if 和 key属性 混合使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
2.过渡模式
在多个元素过渡时,这些元素会同时出发,vue 提供了两个属性,在 中加入 mode 属性,它有两个值
in-out: 新元素先进行过渡,完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡,完成之后新元素过渡进入。
三、多组件过渡
1.多组件过渡,利用 is 属性
CSS
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
JavaScript
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
四、列表过渡
列表的过渡需要用 v-for 和 <transition-group> </transition-group>
组件
注意:
① 列表 <transition-group> </transition-group>
在页面渲染出来是个 span 标签, 如果你想更改它用 tag 属性。例如 <transition-group tag="div"> </transition-group>
渲染出来就是div
② 列表在循环时 要给每一个列表项添加唯一的key 属性值。这样列表才会有过渡效果
直接上代码说明:
CSS
引入animate.css
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
JavaScript
引入lodash.min.js 实现随机排序
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
五、其他过渡
- 初始渲染的过渡
在过渡模板<transition>
中加入apper ,页面会在加载时渲染并进行过渡
apper 和进入 离开过渡一样
①自定义类名:
apper-class
apper-active-class
② 自定义js钩子
v-on:before-appear
v-on:appear
v-on:after-appear
转载: http://blog.csdn.net/webxiaoma/article/details/72626731?utm_source=itdadao&utm_medium=referral