5-7Vue中的動畫封裝 · 武功秘籍大全

~~~ <!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"> <div>Bye World</div> </fade> <button @click="handleBtnClick">toggle</button> </div> <script> Vue.component('fade', { props: ['show'], // template: ` // <transition> // <slot v-if="show"></slot> // </transition> template: ` <transition @before-enter="handleBeforEnter" @enter="handleEnter"> <slot v-if="show"></slot> </transition> `, methods: { handleBeforEnter(el) { el.style.color = 'red' }, handleEnter(el, done) { setTimeout(() => { el.style.color = 'green' done() }, 2000) } } }) var vm = new Vue({ el: '#root', data: { show: true }, methods: { handleBtnClick() { this.show = !this.show } } }) </script> </body> </html> ~~~