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

前端之家收集整理的这篇文章主要介绍了vue 1.0 结合animate.css定义动画效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

Box',  data:{     isShow:true   },  methods:{     show(){       this.isShow=!this.isShow;     }   } });

vue 1.0 结合animate.css定义动画

页面记得引入animate.cdd

html

Box2">

css

js

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

总结

以上所述是小编给大家介绍的Vue 1.0自定义动画效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31564.html

猜你在找的Vue相关文章