須要使用 v-if, v-show 來進行css
1), 過分類名html
v-enter: 進入時觸發npm
v-enter-active: 執行過程當中ide
v-enter-to: 中止時進行動畫
v-leave: 離開時開始時進行的this
v-leave:active: 離開執行時spa
v-leave-to: 離開中止時.net
<div> <p>動畫過分</p><br/> <button @click="showHide"> 按鈕</button> <transition name="fade"> <p v-show="show"> 帶動畫的過分被隱藏的區域</p> </transition> <p v-show="show"> 不帶動畫的過分被隱藏的區域</p> </div>
data() { return { show: true, showAdm: true, anim: true, } }, methods: { showHide() { this.show = !this.show },
須要添加css樣式code
.fade-enter-active, .fade-leave-active{ transition: opacity 2s; } .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-to, .fade-leave { opacity: 1; }
<!--動畫--> <div> <button @click="showHideAdm"> 動畫切換</button> <transition name="ami"> <p v-show="showAdm"> 嘿嘿 </p> </transition> </div>
showHideAdm() { this.showAdm = !this.showAdm },
/*動畫*/ .ami-enter-active { animation: bounce-in .5s ease; } /*使用in的反轉動畫*/ .ami-leave-active { animation: bounce-in .5s reverse; } /*進入動畫*/ @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } /*!*離開動畫*!*/ /*@keyframes bounce-out {*/ /*0% {*/ /*transform: scale(0);*/ /*}*/ /*50% {*/ /*transform: scale(1.5);*/ /*}*/ /*100% {*/ /*transform: scale(1);*/ /*}*/ /*}*/
引入第三方cssorm
在index.html中引入
<!--引入第三方css--> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<!--使用第三方庫, 將css在index中引入--> <div> <button @click="animLib">動畫庫</button> <transition name="custom-classes-transition" enter-active-class="animated flipInX" leave-active-class="animated flipOutX"> <p v-if="anim">第三方動畫庫使用 </p> </transition> </div>
animLib() { this.anim = !this.anim }