参考にさせて頂いたページ
公式ページ
以前書いた記事
はじめに
以前簡単なトランジションのサンプルを作ってみました。 それを発展させて、enterとleaveの各4タイミングでjsを実行するサンプルを書いてみました。
- enter開始前
- enter進行中
- enter完了後
- enter途中キャンセル
- leave開始前
- leave進行中
- leave完了後
- leave途中キャンセル
サンプルコード
<style> .hoge-enter-active, .hoge-leave-active { transition: opacity 2s } .hoge-enter, .hoge-leave-to /* hoge-leave-to クラスはバージョン 2.1.8 以降でのみ利用可能 */ { opacity: 0 } </style> <div id="transition-app"> <h1>Vue.jsのサンプル 静的なページ</h1> <button v-on:click="fade">click here</button> <transition name="hoge" v-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 v-show="state.contentIsShow">トグルするコンテンツ</div> </transition> <!--/#transition-app--></div> <script src="js/vue.js"></script> <script> var fadeApp = new Vue({ el: '#transition-app', data: { state: { contentIsShow: true, }, }, methods: { fade: function(){ this.state.contentIsShow = !this.state.contentIsShow; }, beforeEnter: function(){ console.log('beforeEnter') }, enter: function(){ console.log('enter') }, afterEnter: function(){ console.log('afterEnter') }, enterCancelled: function(){ console.log('enterCancelled') }, beforeLeave: function(){ console.log('beforeLeave') }, leave: function(){ console.log('leave') }, afterLeave: function(){ console.log('afterLeave') }, leaveCancelled: function(){ console.log('leaveCancelled') }, }, }); </script>