好资源导航 » 文章资讯 » vue 1.0 结合animate.css定义动画效果

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

2023-09-10 11:14:04 571

Vue1.0动画（自定义动画）

步骤：

1.给当前动画元素添加‘transition'属性其值就是动画名称(假如：fade)

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

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

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

总结

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐