Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具:
一、在 CSS 过渡和动画中自动应用 class
<style>
/* 定义过度动画 */
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
Vue.component('message', {
// 使用transition组件应用过度动画
template: `<transition name="fade"></transition> `
})
二、可以配合使用第三方 CSS 动画库，如 Animate.css
三、在过渡钩子函数中使用 JavaScript 直接操作 DOM
<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(el) {
el.style.opacity = 0 // 设置初始状态
},
enter(el, done) {
document.body.offsetHeight; // 触发回流激活动画
el.style.opacity = 1 // 设置结束状态
}
},
document.body.offsetHeight; // 触发回流激活动画
四、可以配合使用第三方 JavaScript 动画库，如 Velocity.js
纯js方案:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js">
</script>
Vue.component('message', { template: `
<transition
name="fade"
:css="false" // 禁用css
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@leave="leave">
</transition> `,
methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
},
beforeLeave(el) {
el.style.opacity = 1
},
leave(el, done) {
Velocity(el, { opacity: 0 }, { duration: 500, complete: done })
}
},
})
五、列表过渡
利用transition-group可以对v-for渲染的每个元素应用过渡
example:给列表添加效果
<transition-group name="fade">
<div v-for="c in courses" :key="c.name">
{{ c.name }} - ¥{{c.price}}
<button @click="addToCart(c)">加购</button>
</div>
</transition-group>
