logo头像

arthas.com.cn

vue中的过渡和动画

该文章被围观

本文于387天之前发表,文中内容可能已经过时。

对于要添加动画的组件,使用标签包起来。name属性定义class名字,例如:

1
2
3
4
5
6
7
8
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
el: '#demo',
data: {
show: true
}
})
```

```css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

过渡

过渡的类名:

  1. v-ente:定义进入过渡的开始状态
  2. v-enter-active: 定义进入过渡生效时的状态
  3. v-enter-to: 定义进入过渡的结束状态
  4. v-leave: 定义离开过渡的开始状态
  5. v-leave-active: 定义离开过渡生效时的状态
  6. v-leave-to: 定义离开过渡的结束状态

与第三方css库整合

我们可以通过以下特性来自定义过渡类名:

  1. enter-class
  2. enter-active-class
  3. enter-to-class (2.1.8+)
  4. leave-class
  5. leave-active-class
  6. leave-to-class (2.1.8+)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
1
2
3
4
5
6
new Vue({
el: '#example-3',
data: {
show: true
}
})

来源

vue文档

上一篇