VUEサードパーティ製のプラグインanimate.cssアニメーション効果を達成

アニメーション効果にサードパーティ製のプラグインでVUE animate.css達成
animated.cssのようなサードパーティ導入する1.まず
あなたが包まアニメーションラベルが必要になります2.
移行/ leave- 3.追加入力し、アクティブクラスの要素をアクティブ・クラス属性出発入学
前は、値のセットが、アニメーションを追加する必要があります(もちろん、遷移アニメーションで提供されていない、クラス属性はあなたに提供することができるアニメーションタグ付けされたアニメーション化する)
4を添加してもよい:までの期間を入場を均一に出発時刻を設定し、時間の長さ
以下のように場合であります

<!DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "libに/ vue.js"> </ SCRIPT>
<リンクのrel = "スタイルシート"HREF =" libに/ animate.css ">
</ HEAD>
<BODY>
の<divのid ="アプリ">
の<input type ="ボタン」値= "トグル" @ =クリック"フラグ=!フラグ">
<を! - <遷移入る活性クラス=「アニメーションbounceIn」リーブ・アクティブクラス=」アニメーションbounceOut ">
<H3 V-IF ="フラグ">这是一个H3 </ H3>
</遷移> - >
<遷移入る活性クラス=" bounceIn」リーブ活性クラス= "bounceOut"。期間: "400">
<H3 V-IF = "フラグ"クラス= "アニメーション">这是一个H3 </ H3>
</遷移>
</ div>
<スクリプト>
VARのVMは=新しいヴュー({
EL: '#アプリ'、
データ。 {
フラグ:偽
}、
メソッド:{

}
})
</ SCRIPT>
</ body>
</ HTML>

おすすめ

転載: www.cnblogs.com/cssy/p/11605399.html