Vueの使用animate.js

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>使用animate.js </ タイトル> 
    < スクリプトSRC = "../ JS / vue.js" > </ スクリプト> 
    <！ - アニメイト、JS官网ます。https：//daneden.github.io/animate.css/ - > 
    < リンクのrel = "スタイルシート" タイプ= "テキスト/ cssの" のhref =」../ CSS / animate.css」>
    
        @keyframesバウンスイン{
            0％{
                変換：スケール（0）; 
            } 
            50％{ 
                変換：スケール（1.5） 。
            } 
            100％{ 
                変換：スケール（1） 。
            }
        }
        .active { 
            変換原点：左中央。
            アニメーション：バウンス中の1 ; 
        } 
        .leave { 
            変換原点：左中央。
            アニメーション：バウンスで逆1S ; 
        } 
    </ スタイル> 
</ ヘッド> 
< 身体> 
< div要素のid = "アプリ" > 
    <！ - 自定义过渡类名
        入力クラス
        入力 - アクティブクラス
        入るとクラス（2.1.8+）
        リーブ・クラス
        リーブ・アクティブ・クラス
        休暇・ツー・クラス（2.1.8+）
    - > 
    < ボタン@click = "btnClick" >変更</ ボタン> 
    < 遷移
         名= "フェード" 
        入力-アクティブ・クラス= "アクティブ" 
        リーブ-アクティブクラス= "休暇" 
    > 
        < divのV-IF 「=ショー」>こんにちは</ DIV > 
    </ 移行> 
    < 時間> 
    < 遷移
             名= "fade2" 
            入力してアクティブにクラス= "アニメーションスイング"
            リーブ・アクティブ・クラス= "アニメーションシェイク" 
    > 
        < DIV V-IF = "ショー" >こんにちは</ DIV > 
    </ 遷移> 
</ DIV > 
< スクリプト> 
    VM =  新しいヴュー（{
        上：' #app ' 、
        データ：{
            ショー：真
        }、
        方法：{
            btnClick：関数（）{
                 この.SHOW =  ！この.SHOW
            }
        }
    }）
</ スクリプト> 
</ ボディ> 
</ HTML >