アニメーション中
[v-cloak] { display: none; } .v-enter-active, .v-leave-active { transition: opacity 1s; } .v-enter, .v-leave-to { opacity: 0; }
<div id="app" v-cloak> <p> <button @click="show=!show">切り替え</button> <button @click="cancel" :disabled="!anime">キャンセル</button> <span v-if="anime">アニメーション中</span> </p> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled"> <div v-if="show">Hello World!</div> </transition> </div>
new Vue({ el: '#app', data: { show: true, anime: false }, methods: { beforeEnter(el) { console.log('before-enter'); }, enter(el) { console.log('enter'); this.anime = true; }, afterEnter(el) { console.log('after-enter'); el.style.color = 'red'; this.anime = false; }, enterCancelled(el) { console.log('enter-cancelled'); this.anime = false; }, beforeLeave(el) { console.log('before-leave'); }, leave(el) { console.log('leave'); this.anime = true; }, afterLeave(el) { console.log('after-leave'); this.anime = false; }, leaveCancelled(el) { console.log('leave-cancelled'); this.anime = false; }, cancel() { console.log('cancel'); this.show = false; } } });