Nuxt3 + Vue3中appear过渡动画自定义效果失效问题求助

核心排查与修复步骤 #

• 确认JS动画钩子的正确实现
  如果你用JS动画实现appear效果，必须正确绑定@before-appear、@appear、@after-appear这几个钩子，且确保函数逻辑没有错误。示例代码：

  <Transition appear @before-appear="initEl" @appear="runAppearAnim" @after-appear="finishAnim">
    <div v-show="isVisible">需要动画的元素</div>
  </Transition>
  

  对应的脚本：

  const isVisible = ref(true)
  
  const initEl = (el) => {
    el.style.opacity = '0'
    el.style.transform = 'translateY(20px)'
  }
  
  const runAppearAnim = (el, done) => {
    const anim = el.animate(
      [{ opacity: '0', transform: 'translateY(20px)' }, { opacity: '1', transform: 'translateY(0)' }],
      { duration: 800, easing: 'ease-out' }
    )
    anim.onfinish = done
  }
  
  const finishAnim = (el) => {
    el.style.opacity = ''
    el.style.transform = ''
  }
  

• 避免CSS与JS动画冲突
  若同时定义了CSS过渡类（如.v-appear-active）和JS钩子，Vue会优先采用CSS过渡。如果你要使用自定义JS动画，需显式关闭CSS过渡：

  <Transition appear :css="false" @appear="runAppearAnim">
    <!-- 元素内容 -->
  </Transition>
  

• 处理Nuxt SSR的初始渲染问题
  Nuxt服务端渲染会提前生成DOM，可能导致appear动画在客户端初始化时不触发。解决办法：

  1. 用<ClientOnly>包裹过渡组件，强制客户端渲染：

     <ClientOnly>
       <Transition appear @appear="runAppearAnim">
         <div>目标元素</div>
       </Transition>
     </ClientOnly>
     

  2. 在onMounted中延迟触发元素显示：

     const isVisible = ref(false)
     onMounted(() => {
       isVisible.value = true
     })
     

• 检查Transition组件的使用规范
  确保Transition只包裹单个根元素，且使用Vue3的<Transition>（注意首字母大写，旧版<transition>在Vue3中仍兼容，但建议用新版）。

结论 #

这种情况几乎都是配置问题，而非Vue或Nuxt的bug，按照上面的步骤逐一排查即可解决。

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