アニメーション効果を達成するために、サードパーティのライブラリとのVue

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  第三JSに本明細書に組み込まアニメーション- > 
  < リンクのrel = "このスタイルシート" のhref = "./ libに/ animate.css" > 
  <！ - 入場fadelUpはzoomOutを残す> - 
</ ヘッド> 

< 身体> 
  < divの上記のidは=「アプリケーションは」> 
    < INPUT タイプのは=「ボタン」値=「クリック」@click =「旗=旗を！」> 
    <！ - 要件：H3非表示をさせ、クリックし、H3ディスプレイを聞かせて、ボタンをクリックします- > 
    <！ - 最初の方法：- > 
    <移行入る-アクティブクラス=「アニメーションbounceIn」リーブ・アクティブ・クラス= "アニメーションbounceOut" > 
      < H3 V-IF = "フラグに" >これはH3のある</ H3 > 
    </ 移行> 
    
    <！ - 第二の方法：- > 
    <！ - 本明細書中：持続時間= " 「エントリーと出発時刻のミリ秒をアニメーション化する長い統一- > 
    < トランジション入力し、アクティブクラスは、=」bounceIn「のまま、アクティブクラス=」bounceOut「：DURATION =」200 "です> 
      <！ - ここに要素の上にこのライブラリを追加し、その効果を選択し、アニメーションライブラリを使用するには- > 
      < h3のV-IF =「旗」クラス= "アニメーション" >これは、のH3である</ H3> 
    </ 移行> 

    <！ - 使用される：期間=「{入力してください：200を 、残し：400}」 入場時間と時間の長さの出発に提供されている   - > 
    < トランジション入力-アクティブ・クラス=「bounceIn」残すアクティブクラス= "zoomOut" ：DURATION = "{入力：2000、残す：400}" > 
      < H3 V-IF = "フラグに" クラス= "アニメ" >これはのH3である</ H3 > 
    </ トランジション> 
  </ divの> 

  < スクリプト>
    // Vueのインスタンスを作成し、取得のViewModel 
    するvar VM =  新新VUE（{ 
      EL：' #app ' 、
      データ：{ 
        フラグ：偽
      }、
      メソッド：{} 
    }）。
  </ スクリプト> 
</ ボディ> 

</ HTML >
アニメーション効果を達成するために、サードパーティのライブラリとのVue

おすすめ
