Vue-Transition

对 vue 的渐变效果的简单使用

单个节点的渐变效果

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
36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画测试</title>
<link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/vue/2.3.2/vue.js"></script>
<style media="screen">
</style>
</head>
<body>
<div id="example">
<button @click="show = !show">
Toggle render
</button>
<!-- 同一个节点的多个显隐效果 -->
<transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
<p v-if="show" key="1">hello</p>
<p v-else key="2">world</p>
</transition>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
show: true,
},
})
</script>
</html>

这里解释一下 <transition> 中的参数问题:

  1. mode="out-in" 采用的切换模式是 先出后进,保证两个节点能平滑的切换显示, 还有一种是 in-out,
    如果没有指定mode将同时生效,两个元素的动画同时触发这不是我现在需要的
  2. enter-active-class="animated fadeInDown" 元素显示时添加的 class , 这里使用了 animate.css,
  3. leave-active-class="animated fadeOutDown" 元素消失时显示的动画
  4. key 相同标签名中必须的标识,否则 vue 将不能区分元素内容

一种运用 key 简化判断的一种写法

1
2
3
<transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
<p :key="status">{{ status }}</p>
</transition>

它的效果等同于:

1
2
3
4
5
6
7
8
<transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
<button v-if="status === 'show'" key="show">
show
</button>
<button v-if="status === 'hidden'" key="hidden">
hidden
</button>
</transition>

如果是多重的状态判断这个会很实用

多组件之间的状态过渡

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
<div id="example">
<input type="radio" v-model="view" value="v-a">
<input type="radio" v-model="view" value="v-b">
<!-- 多个组件的过渡效果 -->
<transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
<component v-bind:is="view"></component>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
view: 'v-a'
},
methods: {},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
</script>

这种情况下部需要添加 key 值了,因为每次动态渲染的时候都只有一个

这个博客有个赞赏功能,不试一下吗?