<スクリプトSRC = "vue.js"> </ SCRIPT> 
<リンクのrel = "スタイルシート"のhref = "animate.css"> 
<スタイル> / * @keyframesはバウンスで{ * / / *     0％{ * / / *         変換：スケール（0）; * / / *     } * / / *     50％{ * / / *         変換：スケール（1.5）。* / / *     } * / / *     100％{ * / / *         変換：スケール（1）。* / / *     } * / / * } * / / * .active { * / / *     変換原点を左側センター。
    
    
    
    
    
    
    
    
    
    
    
    
    * / 
    / *     アニメーション：バウンス中の1; * / 
    / * } * / 
    / * .leave { * / 
    / *     変換原点：左中央。* / 
    / *     アニメーション：バウンスで1S逆。* / 
    / * } * / 
</スタイル> 
<BODY> 
    <部クラス= "アプリケーション"> 
        <遷移名= "フェード" 
                    入力 -activeクラス= "アニメーションフリップ" 
                    のまま -active-クラス= "アニメーションヒンジ"> 
            <記事V- なら = "ショー"> Selecte </商品> 
        </遷移>
    VAR VM = 新しいヴュー（{ 
        エル： ".appを" 、
        データ：{ 
            ショー：真
        }、
        メソッド：{ 
            ハンドル：機能（）{
                 これ！.SHOW = この.SHOW 
            } 
        } 
    }）

 </スクリプト> 
</ボディ>

上記は、アニメーションです

Vueの使用トランジションやアニメーション効果

1.ページが表示される最初のロードされたスタイルです

加えタグ遷移apperのapper活性クラス=「アニメーションアニメーション」

2.また、他のアニメーションは、遷移ラベルに負荷を必要としています

入力 - アクティブ・クラス=「アニメーションSWIN（名前）をフェードイン入力、アクティブ」

そして、書き込みCSSスタイル

時々主題VUEを知らない3.アニメーションの実行時間

移行要件のラベリング

タイプ=「遷移」（他の標準を設定する方法）

カスタムの長さ：

：中=「1000」（1S）

長い複雑なカスタムアニメーション

：=中「{入力：5000、休暇：2000}」

VUEアニメーションフレームワークAnimate.cssの@keyframes

Vueの使用トランジションやアニメーション効果

おすすめ