Vue Transition组件类名＋TailwindCSS

#本文教学结合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]"