Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vue.js 2.x その0003-02 トランジション開始前、進行中、完了後、途中キャンセルのタイミングで任意のjs処理を実行する

参考にさせて頂いたページ

公式ページ

以前書いた記事

はじめに

以前簡単なトランジションのサンプルを作ってみました。 それを発展させて、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>