教你怎么使用Vue实现动画效果（附代码）
官网 API 地址:https://cn.vuejs.org/v2/guide/transitions.html
官方的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动画key取值影响过渡动画表现
以上就是教你怎么使用Vue实现动画效果（附代码）的详细内容，更多请关注毛票票其它相关文章！