Vue使用animation.css动画库
Vue使用animation.css动画库
十月梦想
发布于 2018-10-09 15:22:33
发布于 2018-10-09 15:22:33
代码可运行
运行总次数：0
代码可运行
看一下上次的代码,最基础的把需要实现动画的代码块放在transition组件内
<div id="app">
<transition
appear
enter-active-class="animated swing"
leave-active-class="animated bounceOutDown"
appear-class="animated swing"
:duration="3000"
>
<p v-if="show">Hello World</p>
</transition>
<button @click="toggle">切换</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
toggle:function(){
this.show=!this.show;
}
}
})
</script>由于使用第三方库,需要使用指定class,所有要之定义class值,使用enter-active-class和leave-active-class,必须包括animated和动画名称!
animate.css官网:https://daneden.github.io/animate.css/
但是发现第一次动画不能加载,我们在transition组件能使用 appear属性 指定一个appear-class为进入时候动画效果
appear-class="animated swing":duration指定动画时长单位毫秒
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-9-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
