一张图，理解 Vue中CSS动画原理

图片来源：自己画的

↑ 上图展示了，元素从显示到隐藏，从隐藏再到显示，各关键时间节点，class的添加和移除状态。
↓ 下图展示了，实现淡入淡出效果的 class 设置。

// 淡入
v-leave-active {
  transition: opacity 3s;
}
v-leave-to {
  opacity: 0;
}

// 淡出
v-enter {
  opacity: 0;
}
v-enter-active {
  transition: opacity 3s;
}