#本文教学结合TailwindCSS实现一个Transition动画的例子#
举例代码：
<transition
enter-active-class="transition-all duration-300 ease-out"
enter-from-class="opacity-0 translate-y-[-10px]"
enter-to-class="opacity-100 translate-y-0"
leave-active-class="transition-all duration-300 ease-out"
leave-from-class="opacity-100 translate-y-0"
leave-to-class="opacity-0 translate-y-[-5px]"
>
<!-- 你的内容 -->
</transition>开始分析：
进入阶段
1，enter-active-class：应用在整个进入阶段
enter-active-class="transition-all duration-300 ease-out"-
transition：启用过渡效果（对应 CSS transition-property） -
duration-300：过渡时长 300ms（对应 transition-duration） -
ease-out：缓动函数（对应 transition-timing-function）
2，enter-from-class：进入起始状态
enter-from-class="opacity-0 translate-y-[-10px]"-
opacity-0：完全透明 -
translate-y-[-10px]：Y轴向上偏移10px（使用自定义值语法）
3，enter-to-class：进入结束状态
enter-to-class="opacity-100 translate-y-0"
-
opacity-100：完全不透明 -
translate-y-0：Y轴归位
离开阶段
-
leave-active-class：应用在整个离开阶段 -
leave-active-class="transition-all duration-300 ease-out" -
leave-from-class：离开起始状态 -
leave-from-class="opacity-100 translate-y-0" -
leave-to-class：离开结束状态 -
leave-to-class="opacity-0 translate-y-[-5px]"
