2.给动画名称写css定义
a:.fade-transition{/*定义动画过渡*/ transition:1s allease;}
b:.fade-enter{/*定义进入动画 注意：进入离开最终一样*/}
c：fade-leave{/*定义离开动画*/}
html如下：
.box{
width:100px;
height:100px;
}
.fade-transition{/*定义动画的过渡效果*/
transition:1sallease;
}
.fade-enter{/*进入动画*/
opacity:0;
}
.fade-leave{/*离开的动画*/
opacity:0;
transform:translate(200px)
}
js
varvm=newVue({
el:'#box',
data:{
isShow:true
},
methods:{
show(){
this.isShow=!this.isShow;
}
}
});
vue1.0结合animate.css定义动画
页面记得引入animate.cdd
html
css
#div2{
width:100px;
height:100px;
background:red;
margin:50pxauto;
}
js
varvm2=newVue({
el:'#box2',
data:{
isShow:true,
},
methods:{
show(){
this.isShow=!this.isShow;
}
},
transitions:{
bounce:{
enterClass:"zoomInLeft",
leaveClass:"zoomInRight"
}
}
})
总结
以上所述是小编给大家介绍的Vue1.0自定义动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！