vue 1.0 结合animate.css定义动画效果
Vue 1.0 动画(自定义动画)
步骤:
1.给当前动画元素添加‘transition'属性 其值就是动画名称(假如:fade)
2.给动画名称写css定义
a: .fade-transition{/*定义动画过渡*/ transition:1s all ease;}
b: .fade-enter{/*定义进入动画 注意:进入离开最终一样*/}
c:fade-leave{/*定义离开动画*/}
html 如下:
<div id="wrap"> <input type="button" value="按钮" @click="show"> <div class="box" v-show='isShow' transition='fade'></div> </div> .box{ width:100px; height:100px; } .fade-transition{ /*定义动画的过渡效果*/ transition:1s all ease; } .fade-enter{ /*进入动画*/ opacity:0; } .fade-leave{/*离开的动画*/ opacity:0; transform:translate(200px) }
js
var vm=new Vue({ el:'#box', data:{ isShow:true }, methods:{ show(){ this.isShow=!this.isShow; } } });
vue 1.0 结合animate.css定义动画
页面记得引入animate.cdd
html
<div id="box2"> <input type="button" value="按钮" @click='show'> <div id="div2" class="animated" v-show='isShow' transition="bounce"> </div> </div>
css
#div2{ width: 100px; height: 100px; background: red; margin: 50px auto; }
js
var vm2=new Vue({ el:'#box2', data:{ isShow:true, }, methods:{ show(){ this.isShow=!this.isShow; } }, transitions:{ bounce:{ enterClass:"zoomInLeft", leaveClass:"zoomInRight" } } })
总结
以上所述是小编给大家介绍的Vue 1.0自定义动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
赞 (0)