vue 1.0 结合animate.css定义动画效果

2019-11-19 13:30:55

字体：大中小

来源：转载

供稿：网友

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) }

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;}

var vm2=new Vue({  el:'#box2',   data:{   isShow:true,   },   methods:{    show(){     this.isShow=!this.isShow;    }  },  transitions:{   bounce:{   　　enterClass:"zoomInLeft",   　　leaveClass:"zoomInRight"   }  } })

总结

以上所述是小编给大家介绍的Vue 1.0自定义动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：小程序ios音频播放没声音问题的解决

下一篇：微信小程序实现发红包功能