动画(过渡)
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
1. 单组件/元素过渡
- 过渡的类名
会有 4 个(CSS)类名在 enter/leave 的过渡中切换
- v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
- v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
- v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
image
.box {
width: 300px;
height: 300px;
background: red;
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s ease;
}
.fade-enter-active { /*变化成什么样, 显示的过程 */
width: 300px;
height: 300px;
opacity: 1;
}
.fade-enter { /* 显示前的状态 */
width: 100px;
height: 100px;
opacity: 0;
}
.fade-leave { /* 消失前的状态 */
width: 300px;
height: 300px;
opacity: 1;
}
.fade-leave-active { /*变化成什么样, 消失的过程 */
width: 100px;
height: 100px;
opacity: 0;
}
<div id="app">
<button @click="toggle">点击显示隐藏</button>
<transition name="fade">
<div class="box" v-show="show"></div>
</transition>
</div>
new Vue({
el: '#app',
data: {
show: false
},
methods: {
toggle: function() {
this.show = !this.show;
}
}
});
- 自定义过渡类名
我们可以通过以下特性来自定义过渡类名：
- enter-class
- enter-active-class
- leave-class
- leave-active-class
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" 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 bounceInLeft"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-3',
data: {
show: true
}
})
- 回调事件
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
- 过渡模式
- in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
- out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
2. 列表过渡
渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group> 组件
- 不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
- 内部元素 总是需要 提供唯一的 key 属性值
- 列表的进入和离开过渡
与单个组件/元素一样
