效果图如下：
1. 合使用第三方 JavaScript 动画库，如 Velocity.js <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app"> <button @click="onOff">动画开关</button> <message v-show="isShow" /></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><script>let message = {template: `<transition name="fade":css="false"@before-enter="beforeEnter"@enter="enter"@before-leave="beforeLeave" @leave="leave"> <div style="width:100px; height:100px; background: red"> 我显示了 </div></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 })}}}let vm = new Vue({ el:'#app', data:{ isShow: false, //控制动画 true:显示 }, components:{ message }, methods:{ onOff(){ this.isShow = !this.isShow; } }})</script></body></html> 2. 通过CSS 过渡和动画中自动应用 class <style>/* 定义过度动画v-enter：定义元素进入的初始状态v-enter-active：定义元素进入过渡动画的 transitionv-enter-to：定义元素进入动画结束时的状态v-leave：定义元素离开的初始状态v-leave-active：定义元素离开过渡动画的 transitionv-leave-to：定义元素离开动画结束时的状态.v-enter,.v-leave-to{ //元素进入前和离开结束时的状态 }.v-enter-to,.v-leave{ //这组css会在过渡结束后被移除，立即恢复，没有过渡动画 //所以为了保证有过渡，元素本身也需要有transition才能有过渡动画来恢复初始样式} */.fade-enter-active,.fade-leave-active {transition: opacity .5s;}.fade-enter,.fade-leave-to {opacity: 0;}</style><script>Vue.component('message', {//Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡// 使用transition组件应用过度动画 条件渲染 (使用 v-if ) 条件展示 (使用 v-show )template: `<transition name="fade">...</transition>`,})</script> 3. 使用第三方 CSS 动画库，如 Animate.css <link rel="external nofollow" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet"type="text/css">//使用<transition enter-active-class="animated bounceIn"leave-active-class="animated bounceOut"><div> Animate.css </div>></transition>//动画查看： https://www.dowebok.com/demo/2014/98/ 4. 在过渡钩子函数中使用 JavaScript 直接操作 DOM
JavaScript 钩子
可以在属性中声明 JavaScript 钩子，使用JS实现动画。
Vue.component('message', {template: `<transitionv-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"><div> 动画 </div></transition>`,methods: {//用js操作css 实现动画beforeEnter(el) {el.style.opacity = 0 // 设置初始状态},enter(el, done) {document.body.offsetHeight; // 触发回流激活动画el.style.opacity = 1 // 设置结束状态}},})