一：使用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