@の前に入力し、隠された後、時間を表示するために、それをクリックして、それはショーの前にトリガされます。異なる@enterは、アニメーションが実行時にトリガされます。トリガーが完了した後に、入力した後に、@に行われます。これらはJSフックによって達成され、それは、JSを達成するために、次のとおりです。
<DOCTYPE htmlの！>
<HTML>
<HEAD>
<TITLE> </ TITLE>
<META HTTP-当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF-8" />
<リンクのrel = "スタイルシート"タイプ="テキスト/ cssの"のhref =" ./ animate.css ">
<スクリプトSRC =" ./ vue.js "> </ SCRIPT>
<！ - <スクリプトSRC ="のhttp：//cdn.staticfile .ORG / VUE / 2.6.10 / vue.common.dev.js "> </ SCRIPT> - >
</ HEAD>
<BODY>
の<divのid ="ルート">
//自定义クラスの名字：
<遷移
名=「フェード」
@の前に、入力=「handleBeforeEnter」
@ = "handleEnter"を入力し
た後、入力してください= "handleAfterEnter" @
>
の<div V-ショー= "ショー">こんにちは</ div>
</移行>
<ボタン@クリック= "handleClick" > 切り替え</ボタン>
</ div>
<スクリプトタイプ= "テキスト/ JavaScriptを">
VAR Vueの新しい新しいVM =（{
EL： "#root"、
データ：{
表示：trueに
}、
方法：{
handleClick：機能（）{
！= this.Show this.Show
}、
// ELは、アニメーションパッケージラベル参照
機能（EL）{：handleBeforeEnter
//console.log("handleBeforeEnter「）
//ラベルを時間から隠さショーをクリックし、赤くなっ
el.style.colorを=「赤」赤」
}、
//行わエル同上、2つのコールバック関数を受け取ります
handleEnter：関数（EL、行わ） {
に2秒後に赤い//表示する前に、緑色
のsetTimeout（（）=> {
el.style.color = "グリーン"
}、2000）
のsetTimeout（（）=> {
/ /しかし、4秒（つまり2秒緑の後、あり、そして黒の4-2秒後）VUE終わりを告げる前に、
VUEを伝えるために実行は、実行を完了した後に行わ（）//行われ、これは、非常に重要である
}、4000）
}、
handleAfterEnter：関数（EL）{
el.style.color = "黒"
}
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>
もちろん、入学アニメーションだけでなく、出演アニメーションに加えて：
<DOCTYPE htmlの！>
<HTML>
<HEAD>
<TITLE> </ TITLE>
<META HTTP-当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF-8" />
<リンクのrel = "スタイルシート"タイプ="テキスト/ cssの"のhref =" ./ animate.css ">
<スクリプトSRC =" ./ vue.js "> </ SCRIPT>
<！ - <スクリプトSRC ="のhttp：//cdn.staticfile .ORG / VUE / 2.6.10 / vue.common.dev.js "> </ SCRIPT> - >
</ HEAD>
<BODY>
の<divのid ="ルート">
//自定义クラスの名字：
<遷移
名=「フェード」
の前に脱退=「handleBeforeLeave」@
@休暇= "handleLeave"
@の後に脱退= "handleAfterLeave"
>
<divのV-ショー= "ショー">こんにちは</ div>
</移行>
<ボタン@ =クリックして"handleClick"> </ button>の切り替え
</ div>
<スクリプトタイプ= "テキスト/ JavaScriptを">
VAR Vueの新しい新しいVM =（{
EL： "#root"、
データ：{
ショー：trueに
、}
方法：{
handleClick：機能（）{
！= this.Show this.Show
}、
// ELは、ラベル包まれたアニメーションを指し
handleBeforeLeave：機能（EL）{
//console.log("handleBeforeLeave「）
//赤字にクリックし、表示からラベルを隠す
」= el.style.color赤」
}、
// 2つのコールバック関数、EL前掲、DONE受信
handleLeave：関数（EL、DONE）{
表示を前//に2秒後に緑色、赤色
のsetTimeout（（）=> {
el.style.color = "グリーン"
}、2000）
のsetTimeout（（）=> {
//しかしVUE端を伝える前に4秒（つまり2秒緑色後で、4-2秒黒後）
に行わ（）//行われ、これは、端部の実装は非常に重要ですテルのVUEの後、実行されている
}、4000）
}、
handleAfterLeave：関数（EL）{
たsetTimeout（（）=> {
el.style.color = "黒"
}、2000）
}
}
}）;
</スクリプト>
</ BODY>
</ HTML>
速度を使用してください。ダウンロード：http://velocityjs.org/
<DOCTYPE htmlの！>
<HTML>
<HEAD>
<TITLE> </ TITLE>
<META HTTP-当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF-8" />
<リンクのrel = "スタイルシート"タイプ="テキスト/ cssの"のhref =" ./ animate.css ">
<スクリプトSRC =" ./ vue.js "> </ SCRIPT>
<スクリプトSRC =" ./ velocity.js "> </ SCRIPT>
<！ - <スクリプトSRC = "http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"> </ SCRIPT> - >
</ HEAD>
<BODY>
<div要素ID = "ルート">
//自定义クラスの名字：
<遷移
名= "フェード"
@の前に、入力= "handleBeforeEnterを"
@ = "handleEnter"を入力し
た後、入力してください= "handleAfterEnter" @
>
<divのV-ショー= "ショー">こんにちは</ DIV>
</移行>
<ボタン@クリック= "handleClick">切换</ボタン>
</ div>
<スクリプトタイプ= "テキスト/ javascriptの">
のvar VM =新しいヴュー（{
エル： "#root"、
データ：{
ショー：真
}、
メソッド：{
handleClick：機能（）{
this.show = this.show！
}、
//エル指的是动画包裹的标签
handleBeforeEnter：関数（EL）{
el.style.opacity = 0;
}
//行わエル同上、2つのコールバック関数を受け取ります
handleEnter：関数（ELは、DONE）{
//それが完全に追加する注：エンド伝えるVUE行わ
速度を（EL、{不透明度：1}、{DURATION：1000、完全：行わ}）
}、
handleAfterEnter：関数（EL） {
アラート（ "アニメーションの終わり"）
}
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>