アニメーションパッケージ再利用可能なコードをしてみましょう
ここでは、簡単なクリック勾配フェードは次のとおりです。
<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> - >
<スタイルタイプ="テキスト/ cssの">
/ *因为没有给它命名、所以用默认V开头的クラス名* /
.V入力し、.Vは-残す-に{
不透明度：0。
}
残す活性.V-{.V-活性入力し、
遷移：不透明度1S。
//性能考虑、尽量不用インデックス作为キー值<BR>
<移行>
<divのV-ショー= "ショー">こんにちは</ DIV>
</移行>
<ボタンをクリック@ = "handBtnClick">トグル</ボタン>
</ DIV>
ます。<script type = "text / javascriptの">
のvar VM =新しいヴュー（{
エル： "#root"、
データ：{
ショー：真
}、
メソッド：{
handBtnClick：機能（）{
this.show =！ this.show
}
}
}）。
</スクリプト>
</ BODY>
梱包後：
<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> - >
<スタイルタイプ="テキスト/ cssの">
/ *因为没有给它命名、所以用默认V开头的クラス名* /
.V入力し、.Vは-残す-に{
不透明度：0。
}
残す活性.V-{.V-活性入力し、
遷移：不透明度1S。
の<div>のHello World </ DIV>
</フェード>
<フェード：ショー= "ショー">
<H1>のHello World </ H1>
</フェード>
<ボタン@クリック=」 handBtnClick ">トグル</ボタン>
</ div>
<スクリプトタイプ="テキスト/ javascriptの">
Vue.component（"フェード」、{
小道具：[ "ショー"]、
テンプレート： `
<遷移>
<スロットv-IF = "ショー"> </スロット>
</遷移>
`
}）。
VaRのVM =新しいヴュー（{
エル： "#root"、
データ：{
ショー：真
handBtnClick：関数（）{
！this.show = this.show
}
}
}）。
</スクリプト>
</ BODY>
</ HTML>
CSSアニメーションを行うことができますが、JSアニメーションで：実際には、それはまた、CSSをカプセル化することができます。
<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> - >
<スタイルタイプ="テキスト/ cssの">
/ *因为没有给它命名、所以用默认V开头的クラス名* /
.V入力し、.Vは-残す-に{
不透明度：0。
}
残す活性.V-{.V-活性入力し、
遷移：不透明度1S。
<div>のHello World </ DIV>
</フェード>
<フェード：ショー= "ショー">
<H1>のHello World </ H1>
</フェード>
<ボタン@クリック= "handBtnClick">トグル</ button>の
< / DIV>
<スクリプトタイプ= "テキスト/ javascriptの">
Vue.component（ "フェード"、{
小道具：[ "ショー"]、
テンプレート： `
<遷移@前に入力し= "handleBeforeEnterは" @ = "handleEnter"を入力>
<スロットv-IF = "ショー"> </スロット>
</遷移>
`、
方法。
}、
handleBeforeEnter：関数（EL）{
el.style.color = "赤"
handleEnter：関数（行わEL）{
のsetTimeout（（）=> {
el.style.color = "グリーン"
完了（）//再次注意：要记得行わ（）
} 1000 ）
}
}
}）。
VaRのVM =新しいヴュー（{
エル： "#root"、
データ：{
ショー：真
}、
メソッド：{
handBtnClick：機能（）{
！this.show = this.show
}
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>
（このパッケージは、完全なCSSであってもよい、JS、HTMLは、コンポーネントにカプセル化される。推奨します）