Vue transition搭配Animate.css时fadeInUp/fadeOutDown动画失效

三个问题叠加导致只有透明度动画、没有位移效果：

• Animate.css 版本兼容问题：v4及以上版本调整了类名规则，所有官方类名都需要加animate__前缀，你当前写的animated/fadeInUp/fadeOutDown是v3及更早版本的写法，新版下位移相关的动画规则没有被正确匹配，只有透明度属性碰巧被兜底规则触发。
• 元素类型问题：<span>默认是行内非替换元素，CSS transform 位移属性对这类元素默认不生效，哪怕动画类完全正确，位移动画也不会渲染。
• 额外逻辑隐患：当前逻辑每次rotatingText变化都会新建一个定时器，没有清理旧定时器，运行时间久了会出现多个定时器同时触发、动画切换速度混乱的问题。

1. 修正Animate.css类名
   如果用的是v4+版本，把transition上的动画类全部补全前缀，基础类从animated改为animate__animated，动画名前也加animate__前缀。如果是v3及以下老版本可以跳过这步，但更建议升级到新版。
2. 给动画元素修改display属性
   给轮播的span加类名，设置display: inline-block或者display: block，让transform属性可以正常生效。
3. 补全定时器清理逻辑，避免多实例冲突。

组件模板部分 #

<transition
  appear
  enter-active-class="animate__animated animate__fadeInUp"
  leave-active-class="animate__animated animate__fadeOutDown"
  mode="out-in"
>
  <span
    :key="rotateindex"
    class="rotate-text-item"
    :style="{ color: rotatingText[rotateindex].colour }"
  >
    {{ rotatingText[rotateindex].title }}
  </span>
</transition>

样式部分 #

.rotate-text-item {
  display: inline-block;
}

逻辑部分 #

import { ref, watch, onUnmounted } from 'vue'

const rotateindex = ref(0)
const rotatingText = ref([
  {
    "title":"Test 1",
    "colour":"#00FFFF"
  },
  {
    "title":"Test 2",
    "colour":"#0000FF"
  },
  {
    "title":"Test 3",
    "colour":"#FF00FF"
  }
])
// 存储定时器ID
let rotateTimer = null

const textRotate = () => {
  rotateindex.value += 1
  const textList = rotatingText.value
  if (rotateindex.value >= textList.length) {
    rotateindex.value = 0
  }
}

const startAnimation = () => {
  // 启动新定时器前先清理旧的，避免多定时器叠加
  if (rotateTimer) clearInterval(rotateTimer)
  rotateTimer = setInterval(textRotate, 2000)
}

watch(
  rotatingText,
  (text) => {
    if (!text || text.length === 0) return
    startAnimation()
  },
  { immediate: true }
)

// 组件卸载时清理定时器，避免内存泄漏
onUnmounted(() => {
  if (rotateTimer) clearInterval(rotateTimer)
})

修改完成后垂直方向的进出位移动画即可正常生效。

内容的提问来源于stack exchange，提问作者r3plica