~~~ <div id="app"> <fade :show="show"> <div>hello world</div> </fade> <button @click="handleClick">add</button> </div> Vue.component('fade', { props: ['show'], template: ` <transition @before-enter="handleBeforeEnter" @enter="handleEnter" > <slot v-if="show"></slot> </transition> `, methods: { handleBeforeEnter(el) { el.style.opacity = 0; }, handleEnter(el,done) { Velocity(el, { opacity: 1 }, { duration: 1000, /* 動畫執行完畢調用done */ complete: done }) } } }) var vm = new Vue({ el: "#app", data: { show: true }, methods: { handleClick() { this.show = !this.show; } } }) ~~~ ~~~ var vm = new Vue({ el: "#app", data: { show: true }, methods: { handleClick() { this.show = !this.show; } } }) ~~~