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]"