Vueの研究ノート[20] - Vueのアニメーション（アニメーションフック関数）

フック関数を定義し、使用

1. そして、移行は、アセンブリ3つのフック関数を定義します。

 <DIV ID = "アプリ"> 
     の<input type = "ボタン"値= "切换动画"をクリック@ = "isshow =！isshow"> 
     <トランジション
    @の前に、入力= "beforeEnter" 
    @入る= "入力" 
    @アフターを入力= "afterEnter"> 
      <divのV-IF = "isshow"クラス= "ショー"> OK </ DIV> 
    </移行> 
 </ div>

2. メソッドのフックは、3つのメソッドを定義しています。

 方法：{ 
         beforeEnter（EL）{//アニメーションのコールバックに入る前に
           el.style.transformを= '移動X（500pxなど）'; 
        }、
        {//完全なアニメーションは、コールバック時間入力（ELは、DONE）を入力します
          el.offsetWidthを、
          EL = .style.transform '移動X（0PX）'; 
          DONE（）; 
        }、
        afterEnter（EL）{//アニメーションが完了した後にコールバックを入力
          this.isshow = this.isshow ;! 
        } 
      }

3. 長さとスタイルが遷移アニメーションを定義しました。

 .SHOW { 
       遷移：全て0.4秒容易さ; 
     }