Vue_过渡&动画transition用法

简介

Vue 提供了 transition 的封装组件。

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

• v-enter：进入过渡–开始。

• v-enter-active：进入过渡–生效时。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

• v-enter-to：进入过渡–结束状态。

• v-leave：离开过渡–开始。

• v-leave-active：离开过渡–生效时。

• v-leave-to：离开过渡–结束状态。

CSS过渡

常用的过渡都是使用 CSS 过渡，是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性。
• 指定效果的持续时间。

触发：hover、v-enter-

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
   
  transition: all .3s ease;
}
.slide-fade-leave-active {
   
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-