这篇文章将为大家详细讲解有关如何使用Vue实现动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是一家专业提供绥中企业网站建设,专注与成都网站建设、网站制作、成都h5网站建设、小程序制作等业务。10年已为绥中众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
官方的demo点击显示与消失
hello
transition 使用
(元素,属性、路由....)
class定义
.fade-enter{ }进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;(运动的初始状态)
.fade-enter-active{ }进入过渡的结束状态,元素被插入时就生效,在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
.fade-leave{ }离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
.fade-leave-active{ }离开过渡的结束状态,元素被删除时生效,在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
自定义过度类名
默认的
.fade-enter变成.fade-in-enter默认的
.fade-enter-active变成.fade-in-active默认的
.fade-leave变成.fade-out-enter默认的
.fade-leave-active变成.fade-out-active
hello
.fade-in-active,
.fade-out-active {
transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
opacity: 0;
}transition相关函数
transition结合animate.css使用
以下代码演示元素以 X 轴为基线,翻转进场出场的动画
Animate.css库点这里地址:https://animate.style/
列表过渡
需要注意的是在group的时候,key的取值直接影响动画的过渡。
关于“如何使用Vue实现动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
名称栏目:如何使用Vue实现动画效果
文章链接:http://jxjierui.cn/article/gjcisi.html


咨询
建站咨询
