vue 1.0 结合animate.css定义动画效果
时间：2021-02-15 10:20:36|栏目：vue|点击： 次
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"
}
}
})
总结
