Vue 过渡 & 动画

在 Vue 的过渡效果中，.enter-active、.leave-active、.enter 和 .leave-to 是一些预定义的 CSS 类名，用于控制过渡的不同阶段。

1. .enter-active：表示进入过渡的活动状态。在元素插入到 DOM 中时添加，然后在过渡结束时移除。通过设置此类的样式，可以定义元素进入过渡时的动画效果。

2. .leave-active：表示离开过渡的活动状态。在元素从 DOM 中移除时添加，然后在过渡结束时移除。通过设置此类的样式，可以定义元素离开过渡时的动画效果。

3. .enter：表示进入过渡的开始状态。在元素插入到 DOM 中时添加，然后在下一帧移除。通过设置此类的样式，可以定义元素进入过渡的初始状态，在下一帧中会过渡到 .enter-active 的样式。

4. .leave-to：表示离开过渡的结束状态。在元素从 DOM 中移除时添加，然后在下一帧移除。通过设置此类的样式，可以定义元素离开过渡的最终状态，在下一帧中会过渡到 .leave-active 的样式。

这些类名是 Vue 过渡系统自动生成并应用于过渡元素的，以实现过渡效果。你可以根据自己的需求在这些类名下定义相应的 CSS 样式，以实现你想要的过渡动画。例如，设置透明度、位移、缩放等样式属性来创建动画效果。

以下是一个示例：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

在上述示例中，我们使用了 .fade-enter-active 和 .fade-leave-active 来定义进入和离开过渡的动画过渡时间长度和过渡属性（这里使用了透明度 opacity），而 .fade-enter 和 .fade-leave-to 则定义了元素进入和离开过渡时的初始状态和最终状态。