Vue配合Animate.css实现动画效果⼀、npm安装animate.css
npm install animate.css --save
⼆、在组件中引⼊，并控制动画元素的显⽰消失
元素是在显⽰和消失的时候才会显⽰出动画，需要对动画作⽤的元素是否显⽰进⾏控制
<script>
import animate from'animate.css'
export default{
data(){
return{
animate下载安装
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>我是动画显⽰的内容</p>
</div>
</transition>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。