Vue 1.0 动画（自定义动画）
站在用户的角度思考问题，与客户深入沟通，找到奎文网站设计与奎文网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、申请域名、雅安服务器托管、企业邮箱。业务覆盖奎文地区。
步骤：
1.给当前动画元素添加‘transition'属性 其值就是动画名称(假如：fade)
2.给动画名称写css定义
a: .fade-transition{/*定义动画过渡*/ transition:1s all ease;}
b: .fade-enter{/*定义进入动画 注意：进入离开最终一样*/}
c：fade-leave{/*定义离开动画*/}
html 如下：
.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
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自定义动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！