溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
加一個功能，當刷新頁面的時候也有動畫效果(加上appear和appear-active-class="animated rubberBand"：
<!DOCTYPE?html> <html> <head> ????<title></title> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ????<link?rel="stylesheet"?type="text/css"?href="./animate.css"> ????<script?src="./vue.js"></script> ????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?--> </head> <body> ????<div?id="root"> ????????//name隨便取名: ????????<!--?<transition?name="fade"> ????????????<div?v-show="show">hello</div> ????????</transition>?--> ????????//自定義class名字： ????????<transition? ????????????name="fade"? ????????????appear? ????????????enter-active-class="animated?rubberBand"? ????????????leave-active-class="animated?hinge"? ????????????appear-active-class="animated?rubberBand" ????????> ????????????<div?v-show="show">hello</div> ????????</transition> ????????<button?@click="handleClick">切換</button> ????</div> ????<script?type="text/javascript"> ????????var?vm?=?new?Vue({ ????????????el:?"#root", ????????????data:?{ ????????????????show:?true ????????????}, ????????????methods:?{ ????????????????handleClick:?function()?{ ????????????????????this.show?=?!this.show ????????????????} ????????????} ????????}); ????</script> </body> </html>
如果過渡和庫的動畫都有：
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
????<style?type="text/css">
????????.fade-enter,?.fade-leave-to?{
????????????opacity:?0
????????}
????????.fade-enter-active,?.fade-leave-active?{
????????????transition:?opacity?3s
????????}
????</style>
</head>
<body>
????<div?id="root">
????????//name隨便取名:
????????<!--?<transition?name="fade">
????????????<div?v-show="show">hello</div>
????????</transition>?-->
????????//自定義class名字：
????????<transition?
????????????name="fade"?
????????????appear?
????????????enter-active-class="animated?rubberBand?fade-enter-active"?
????????????leave-active-class="animated?hinge?fade-leave-active"?
????????????appear-active-class="animated?rubberBand"
????????>
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????</script>
</body>
</html>但是，問題是，animate庫的動畫時長是1s，而我自己設置的是3s，所以要統一下時間。用type="transition"，意思是以transition時間為準：
(但是經過測試，發現有問題)
還可以設置時間duration="10000"，單位毫秒。還可以設置更細:duration="{enter: 5000, leave: 1000}"：
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
????<style?type="text/css">
????????.fade-enter,?.fade-leave-to?{
????????????opacity:?0;
????????}
????????.fade-enter-active,?
????????.fade-leave-active?{
????????????transition:?opacity?3s;
????????}
????</style>
</head>
<body>
????<div?id="root">
????????//自定義class名字：
????????<transition?
????????????:duration="{enter:?5000,?leave:?1000}"
????????????name="fade"?
????????????appear?
????????????enter-active-class="animated?rubberBand?fade-enter-active"?
????????????leave-active-class="animated?hinge?fade-leave-active"?
????????????appear-active-class="animated?rubberBand"
????????>
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
