Vue Transition组件类名＋TailwindCSS

巴巴博一2025-04-02 13:45

#本文教学结合TailwindCSS实现一个Transition动画的例子#

举例代码：

javascript 复制代码

  <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：应用在整个进入阶段

javascript 复制代码

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：进入起始状态

javascript 复制代码

enter-from-class="opacity-0 translate-y-[-10px]"

opacity-0：完全透明
translate-y-[-10px]：Y轴向上偏移10px（使用自定义值语法）

3，enter-to-class：进入结束状态

javascript 复制代码

enter-to-class="opacity-100 translate-y-0"

opacity-100：完全不透明
translate-y-0：Y轴归位

离开阶段

leave-active-class：应用在整个离开阶段

javascript 复制代码

leave-active-class="transition-all duration-300 ease-out"

leave-from-class：离开起始状态

javascript 复制代码

leave-from-class="opacity-100 translate-y-0"

leave-to-class：离开结束状态

javascript 复制代码

leave-to-class="opacity-0 translate-y-[-5px]"