Vueアニメーションの1つ:css方式
2931 ワード
Vueの項目では、アニメーション効果を使う必要があるので、もちろんいいですが、Cssでアニメーションを作る方法をご紹介します.1.fade-enter,fade-enter-toを設定.fade-enter-activeとfade-leave,fade-leave-to,.fade-leave-activeでアニメーションを実現します.
2、animate.cssアニメーションライブラリで、アニメーション効果を実現します.
3、混用方法:a:transitionにappearを追加するのは、最初のリフレッシュ時に、アニメーションb:animateのためです.cssとカスタムアニメーションの持続時間が一致しないため、一致type=「transition」:duration=「5000」:duration=「{enter:5000,leave:10000}」が必要です.
Hello Everyone, This is Christine!
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
}
}
})
2、animate.cssアニメーションライブラリで、アニメーション効果を実現します.
-animate.css
Hello Everyone, This is Christine!
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
}
}
})
3、混用方法:a:transitionにappearを追加するのは、最初のリフレッシュ時に、アニメーションb:animateのためです.cssとカスタムアニメーションの持続時間が一致しないため、一致type=「transition」:duration=「5000」:duration=「{enter:5000,leave:10000}」が必要です.
animate.css
Hello Everyone, This is Christine!
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
}
}
})