3.1、进入/离开 & 列表过渡
1. Overview
- Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM.
- On this page, we’ll only cover **entering, leaving, **and list transitions, but you can see the next section for managing state transitions.
DOM操作时的过渡效果,让页面更丝滑。
2. 单元素/组件的过渡
先来个demo开开胃,完整代码
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
2.1 过渡的类名(Transition Classes)
There are six classes applied for enter/leave transitions.
enter/leave过渡中,会有6个class切换
v-enter
v-enter-active
v-enter-to
(2.1.8+)v-leave
v-leave-active
v-leave-to
(2.1.8+)
2.2 CSS过渡
即给上面例子中的 .fade-enter-active, .fade-leave-active 这些类名应用的CSS样式
2.3 CSS动画
写法差不多,就是把transition换成animation 完整代码
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
<script>
new Vue({
el: '#example-2',
data: {
show: true
}
})
</script>
2.4 自定义过渡的类名
我们可以通过以下 attribute 来自定义过渡类名:
enter-class
enter-active-class
enter-to-class
(2.1.8+)leave-class
leave-active-class
leave-to-class
(2.1.8+)
如下与 Animate.css的结合使用:完整代码
<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>
<script>
new Vue({
el: '#example-3',
data: {
show: true
}
})
</script>
2.5 同时使用过渡和动画
要同时使用过渡和动画,要用type
属性指明类型:animation
or transition
2.6 指定过渡的时间
<transition :duration="1000">...