Vue基础教程（142）过渡和动画效果之单元素/组件的过渡中的自定义过渡的类名：Vue过渡动画别硬写！自定义类名让你秒变“动画导演”，告别死磕Keyframes！

哥们儿姐们儿！有没有觉得，虽然Vue自带的 <transition> 组件挺香，但每次想做点不一样的动画，都得吭哧吭哧地去写一堆 @keyframes 或者 transition 属性？做一两个还好，项目里动画多了，维护起来简直是一场噩梦，CSS文件肿得像过年期间的你。

别慌！Vue的开发者们早就看穿了这一切。他们给我们留了一个后门，一个可以让我们“偷懒”并变得更强大的秘籍——自定义过渡类名。

一、回忆杀：默认的过渡是怎么“演”的？

在解锁新技能之前，我们先快速回顾一下“原版技能”。一个基本的Vue过渡大概是这样的：

<transition name="fade">
  <p v-if="show">你好，我会淡入淡出！</p>
</transition>

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

这里，Vue非常贴心地给我们定下了一套命名规则：

• v-enter-active / v-leave-active（动画进行中）
• v-enter / v-enter-to（入场起点/终点）
• v-leave / v-leave-to（离场起点/终点）

这里的 v- 是默认前缀，如果你像上面一样加了 name="fade"，那就变成了 fade-。

但是！问题来了！ 如果设计师甩给你一个非常复杂、非常炫酷的动画效果，或者你想直接用现成的动画库，难道你要把这些库里的CSS代码，一个个手抄到你的 -enter-active 类里吗？太不优雅了！

二、神功入门：什么是自定义过渡类名？

简单来说，自定义过渡类名就是一套“改名卡”。它允许你告诉