Vue.jsでトランジションの内容を特定イベント時にのみ変更する

v-ifもしくはv-showで要素の表示切替を制御している場合、それをtransitionラッパーコンポーネントで囲みクラスを調整すると簡単にアニメーションが実装できる。

ただ、特定の操作でのみ要素をアニメーションさせたい場合、つまり、他の操作による要素の表示切替ではアニメーションさせたくない場合は少し工夫が必要になる。

test.js

new Vue({
  el: '#app',
  data: {
    accBtnFlg       : false,
    navToggle        : false,
    navAnime         : 'toggle-no-anime'
  },...
  methods: {
    toFalseAccFlg : function(){
      this.accBtnFlg = false;
    },
    toggleAcc: function(e){
      this.navToggle = !this.navToggle;
      this.accBtnFlg = true;
    },
  }
});  

test.html

<span class="button" @click="toggleAcc" :class="{active : navToggle}">ボタン</span>
<transition :name="accBtnFlg ? 'toggle' : 'toggle-no-anime'" @after-enter="toFalseAccFlg" @after-leave="toFalseAccFlg">
  <div class="cnt" v-show="navToggle">
  </div>
</transition>

1. .buttonクリック時の.cntの表示切替時にのみクラスを付け替えたいので、判定用の変数accBtnFlgを用意し、イベント時にtrueにする
2. accBtnFlgの値によってクラスの値を切り替える。「toggle-no-anime」ではdurationを0にする
3. アニメーション終了後はクラスを元に戻す必要があるので、after-enter/after-leaveにaccBtnFlgをfalseに戻すtoFalseAccFlgを設定

JavaScriptフックを使ってもタイミングが合わない…と試行錯誤していたけど、こういう時のためのデータバインディングでした。