<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的动画封装</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <fade :show="show"> <div> hello world </div> </fade> <fade :show="show"> <h1> hello world </h1> </fade> <button @click="handleBtnClick">toggle</button> </div> <script> Vue.component('fade', { props: ['show'], template: "<transition @before-enter='handleBeforeEnter' @enter='handleEnter'><slot v-if='show'></slot></transition>", methods: { handleBeforeEnter: function (el) { el.style.color = 'red'; }, handleEnter:function (el,done) { setTimeout(()=>{ el.style.color = 'green'; done() },2000) } } }); var vm = new Vue({ el: '#root', data: { show: false }, methods: { handleBtnClick: function () { this.show = !this.show } } }) </script> </body> </html>