如何使用Vue实现动画效果

  
    Toggle
  
  
    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相关函数