cartoonvue.vue(CSS3)支持一個動畫

<!--動畫效果圖 利用CSS3動畫屬性實現--><template><div><h2>動畫效果 come and go</h2><button @click="isShow = !isShow">顯示/隱藏</button><!-- <transition name = "hello"> 則 v-enter-active改成hello-enter-active 如果不改則會顯示圖像沒有動畫效果--><!-- <transition :appear = "true" 則點擊瀏覽器刷新就開始從左往右自動出現> 不加刷新瀏覽器直接顯示圖像，因為開始isShow=true--><transition :appear = "true"><h1 v-show="isShow">你好啊，悅悅小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜歡吃手機屏幕</h1></transition></div></template><!--組件數據交互--><script>export default {name:'cartoonvue',data(){return{isShow:true}}}</script><!--組件樣式 linear:勻速的 nametest:名字上下要一致--><style scoped>h1{background-color: red;}.v-enter-active{animation: nametest 5s linear}.v-leave-active{animation: nametest 5s linear reverse}@keyframes nametest {from {transform: translateX(-1000px);}to {transform: translateX(0px);}}</style>

cartoonvue2.vue(CSS3)進階版 多了個transition-group 支持多個動畫

<!--動畫效果圖 利用CSS3動畫屬性實現 進步版本--><template><div><h2>動畫效果2 come and go</h2><button @click="isShow = !isShow">顯示/隱藏</button><!-- <transition name = "hello"> 則 v-enter-active改成hello-enter-active 如果不改則會顯示圖像沒有動畫效果--><!-- <transition :appear = "true" 則點擊瀏覽器刷新就開始從左往右自動出現> 不加刷新瀏覽器直接顯示圖像，因為開始isShow=true--><transition name = "hello" :appear = "true"><h1 v-show="isShow">進步版：你好啊，悅悅小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜歡吃手機屏幕</h1></transition><!-- 如果是transition里面有多個<h1>則直接用<transition-group></transition-group> 替換 <transition></transition> 但是里面得申明一個key 具體值隨便寫只要不同就行--><transition-group name = "hello" :appear = "true"><h1 v-show="isShow" key="1">進步版1：你好啊，悅悅小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜歡吃手機屏幕</h1><h1 v-show="isShow" key="2">進步版2：你好啊，悅悅小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜歡吃手機屏幕</h1></transition-group></div></template><!--組件數據交互--><script>export default {name:'cartoonvue2',data(){return{isShow:true}}}</script><!--組件樣式 linear:勻速的 nametest:名字上下要一致--><style scoped>h1{background-color: red;/*transition: 0.5s linear;*/}/**動畫的類名分為6個入場動畫<name>-enter 　　　　入場前<name>-enter-active　　 入場持續的過程<name>-enter-to　　　　入場后出場動畫<name>-leave　　　　　　出場前<name>-leave-active　　　出場持續的過程<name>-leave-to　　　　 出場后*/.hello-enter{/**-100% 這用 % 不要用 px*/transform: translateX(-100%);}/**.hello-enter 和 hello-enter-to 可以合并，離開的起點就是入場的終點所以可以寫成：.hello-leave,.hello-enter-to{transform: translateX(0);}*/.hello-leave{transform: translateX(0);}.hello-enter-to{transform: translateX(0);}.hello-leave-to{transform: translateX(-100%);}/** transition: 0.5s linear; 這個 h1{} 里面了可以 這樣可以寫*/.hello-enter-active,.hello-leave-active{transition: 0.5s linear;}</style>

cartoonvue3.vue 利用第三方動畫來做：

https://www.npmjs.com/ 中搜索 animate.css

代碼：

<!--利用第三方動畫來做地址：https://www.npmjs.com/ 中搜索 animate.css --><template><div><h2>動畫效果3 come and go</h2><button @click="isShow = !isShow">顯示/隱藏</button><!-- <transition :appear = "true" 則點擊瀏覽器刷新就開始從左往右自動出現> 不加刷新瀏覽器直接顯示圖像，因為開始isShow=true--><!--animate__animated animate__bounce 這個是不能動的，enter-active-class和leave-active-class中值可以選擇在上面鏈接中選擇--><transition name = "animate__animated animate__bounce":appear = "true"enter-active-class="animate__swing"leave-active-class="animate__backOutRight"><h1 v-show="isShow">進步版：你好啊，悅悅小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜歡吃手機屏幕</h1></transition><!-- 如果是transition里面有多個<h1>則直接用<transition-group></transition-group> 替換 <transition></transition> 但是里面得申明一個key 具體值隨便寫只要不同就行--><transition-groupname = "animate__animated animate__bounce":appear = "true"enter-active-class="animate__backInDown"leave-active-class="animate__backOutDown"><h1 v-show="isShow" key="1">進步版1：你好啊，悅悅小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜歡吃手機屏幕</h1><h1 v-show="isShow" key="2">進步版2：你好啊，悅悅小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜歡吃手機屏幕</h1></transition-group></div></template><!--組件數據交互--><script>/*** animate.css 這是一個庫所以沒有 from*/import 'animate.css'export default {name:'cartoonvue3',data(){return{isShow:true}}}</script><style scoped>h1{background-color: red;}</style>

以上為具體代碼，只要在App.vue中注冊就行，具體解釋在代碼中有注釋
具體代碼參考 gitee vuedemo2
實際應用參考 gitee vuedemo

總結

以上是生活随笔為你收集整理的Vue CSS3或者npmjs网站中的animate.css实现动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。