一：使用animate.css的使用
1.安装npm install animate.css --save
2.在main.js中引入import animate from 'animate.css'
3.组件中使用
<transition name='fade' enter-active-class='animated flash' leave-active-class='animated shake'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>
主要是在使用动画的外面嵌套transtion标签，加了name、enter-active-class、leave-active-class这样基本就实现了简单的动画，但是刷新页面并不会有动画，要实现要加appear、appear-active-class来实现初始化动画
<transition name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash' leave-active-class='animated shake'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>
这样就实现了刷新页面也有动画。如果想要在动画过程加transition，过度时间，可以这样写：
<transition name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>
<style scoped="scoped">
.fade-enter, .fade-leave-to{
opacity:0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 3s;
}
</style>
这样就实现了3s的过渡时间动画。但是这样有个问题是：我们用的animate.css库中实现flash等的时间是1s，而我们这里写的是3s，以哪个为准呢，vue也不知道，这里我们需要在transition 标签中加type属性，说明是以哪种为准。
<transition name='fade' type='transition' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>
还可以自定义动画时长
<transition :duration='5000' name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
复杂一点为：
<transition :duration='{enter:5000,leave:5000}' name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
如果页面中是多个元素或组件的过渡，可以参考下面的写法：
1.多个元素
这里没有引入animate.css也可以，注意的是一定要加key值，否则没有效果，因为不加key，vue会在切换时候复用dom，加不同的key可以使得vue不复用dom。在transition标签加mode='in-out'实现了先进入再隐藏。在transition标签加mode='out-in'实现了先隐藏再显示。
<template>
<div class="toggle_box">
<transition mode='in-out'>
<div v-if='show' key='hello'>hello word</div>
<div v-else key='bye'>bye word</div>
</transition>
<button @click="handleclick">切换</button>
</div>
</template>
<script>
export default{
data(){
return{
show:'true'
}
},
methods:{
handleclick(){
this.show=!this.show;
}
}
}
</script>
<style>
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
2.多个组件的过渡（按照上面的方法也可以实现）下面说一种动态组件的方法
参考地址：https://blog.csdn.net/q3254421/article/details/84593430
<template>
<div class="dy">
<transition mode='out-in'>
<component :is='type'></component>
</transition>
<button @click="handleClick">切换</button>
</div>
</template>
<script>
import dyOne from './dynamic_one.vue'
import dyTwo from './dynamic_two.vue'
export default{
data(){
return{
type:'dy-one'
}
},
components:{
'dy-one':dyOne,
'dy-two':dyTwo
},
methods:{
handleClick:function(){
this.type=(this.type === 'dy-one'?'dy-two':'dy-one')
}
}
}
</script>
<style>
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
动态组件主要是component 来实现。
附：部分api
fade: {
title: '淡入淡出',
fadeIn: '淡入',
fadeInDown: '向下淡入',
fadeInDownBig: '向下快速淡入',
fadeInLeft: '向右淡入',
fadeInLeftBig: '向右快速淡入',
fadeInRight: '向左淡入',
fadeInRightBig: '向左快速淡入',
fadeInUp: '向上淡入',
fadeInUpBig: '向上快速淡入',
fadeOut: '淡出',
fadeOutDown: '向下淡出',
fadeOutDownBig: '向下快速淡出',
fadeOutLeft: '向左淡出',
fadeOutLeftBig: '向左快速淡出',
adeOutRight: '向右淡出',
fadeOutRightBig: '向右快速淡出',
fadeOutUp: '向上淡出',
fadeOutUpBig: '向上快速淡出'
},
bounce: {
title: '弹跳类',
bounceIn: '弹跳进入',
bounceInDown: '向下弹跳进入',
bounceInLeft: '向右弹跳进入',
bounceInRight: '向左弹跳进入',
bounceInUp: '向上弹跳进入',
bounceOut: '弹跳退出',
bounceOutDown: '向下弹跳退出',
bounceOutLeft: '向左弹跳退出',
bounceOutRight: '向右弹跳退出',
bounceOutUp: '向上弹跳退出'
},
zoom: {
title: '缩放类',
zoomIn: '放大进入',
zoomInDown: '向下放大进入',
zoomInLeft: '向右放大进入',
zoomInRight: '向左放大进入',
zoomInUp: '向上放大进入',
zoomOut: '缩小退出',
zoomOutDown: '向下缩小退出',
zoomOutLeft: '向左缩小退出',
zoomOutRight: '向右缩小退出',
zoomOutUp: '向上缩小退出'
},
rotate: {
title: '旋转类',
rotateIn: '顺时针旋转进入',
rotateInDownLeft: '从左往下旋入',
rotateInDownRight: '从右往下旋入',
rotateInUpLeft: '从左往上旋入',
rotateInUpRight: '从右往上旋入',
rotateOut: '顺时针旋转退出',
rotateOutDownLeft: '向左下旋出',
rotateOutDownRight: '向右下旋出',
rotateOutUpLeft: '向左上旋出',
rotateOutUpRight: '向右上旋出'
},
flip: {
title: '翻转类',
flipInX: '水平翻转进入',
flipInY: '垂直翻转进入',
flipOutX: '水平翻转退出',
flipOutY: '垂直翻转退出'
},
strong: {
title: '强调类',
bounce: '弹跳',
flash: '闪烁',
pulse: '脉冲',
rubberBand: '橡皮筋',
shake: '左右弱晃动',
swing: '上下摆动',
tada: '缩放摆动',
wobble: '左右强晃动',
jello: '拉伸抖动'
}
附录：页面未加载完之前显示加载中的动画
https://blog.csdn.net/weixin_42568343/article/details/82499625