即:一个样式到另一个样式的过渡(动画)效果
Vue在插入、删除、更新DOM时,通过多种不同方式的应用过渡效果。但是本质上还是使用CSS3动画,transition、animation等,或者以下工具:
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
基本用法介绍如下:
- 使用transition组件(即标签),将要执行动画的元素包含在该组件内
<div v-cloak id="app">
<button @click="show=!show">Toggle</button>
<transition name="fade">
<p v-if="show">{{message}}</p>
</transition>
</div>
备注:当插入或者删除包含在 transition 组件中的元素时, Vue将会做以下处理:
- 自动嗅探目标元素是否应用了CSS过渡或动画,如果是,在恰当的时机添加/删除CSS类名(6个,分别为v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active, v-leave-to),其中当<transition>没有名字,则v-是这6个类名的默认前缀,如果使用了name, 则用真实的name值。
- 如果过渡组件提供了javascript钩子函数,这些钩子函数酱紫啊恰当的时机被调用。
<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 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
- 如果没有检测到CSS动画/过渡,或者javascript,则DOM操作在下一帧中立即执行。
引入第三方CSS库:animate.css
<link rel="stylesheet" type="text/css" href="css/animate.css">
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
<p v-if="show">{{message}}</p>
</transition>
多元素动画:使用transition-group以及:key=指定
<transition-group>
<p :key=1 v-if="show">{{message}}</p>
<p :key=2 v-if="show">{{message}}</p>
</transition-group>