在Vue中可以通過過度
transition配合animation實現(xiàn)自定義動畫效果，但是需要對css3非常熟悉才能實現(xiàn)想要的效果抚芦。大家都知道有一個css動畫庫animate.css里面有豐富的動畫效果率拒，簡單易用崩泡。那么在Vue中該如何使用呢？且看下面分享猬膨。
一角撞、npm安裝animate.css
npm install animate.css --save
二、在組件中引入,并控制動畫元素的顯示消失
元素是在顯示和消失的時候才會顯示出動畫勃痴，需要對動畫作用的元素是否顯示進行控制
<script>
import 'animate.css'
export default {
data() {
return {
isShow: false
}
},
methods: {
show() {
this.isShow = true
},
hide() {
this.isShow = false
}
}
}
</script>
三谒所、給動畫組件添加過渡的類名綁定動畫效果
<button @click="show">進入</button>
<button @click="hide">離開</button>
<transition
// 進入動畫
enter-active-class="animated bounceInDown"
// 離開動畫
leave-active-class="animated bounceOutRight"
<div class='content' v-show="isShow">
<p>我是動畫顯示的內(nèi)容</p>
</div>
</transition>
