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 利用第三方动画来做：
/ 中搜索 animate.css
代码：
<!--利用第三方动画来做地址：/ 中搜索 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
