Nuxt.js过渡效果失效问题排查：组件切换无过渡效果

Let's walk through the issues with your current code and get those transitions working properly.

1. Your Transition Component Isn't Wrapping All Toggle Elements #

The biggest problem here is that your <transition name="pulse"> only wraps the v-if div—your v-else div lives outside of it. Vue needs both elements being toggled to sit inside the same transition component to recognize them as a replacement pair and trigger the animation.

Fixed Page Component Code #

<template>
  <main>
    <!-- Wrap both conditional elements inside the transition -->
    <transition name="pulse">
      <div v-if="isUserLoggedIn" key="after-login">
        <x-after-login-about></x-after-login-about>
      </div>
      <div v-else key="before-login">
        <x-before-login-about></x-before-login-about>
      </div>
    </transition>
  </main>
</template>

I added unique key attributes to each div too—this helps Vue avoid reusing DOM elements incorrectly, which can break transitions even when the rest of your setup is correct.

2. Redundant Transitions in Child Components #

Your child components (beforeLogin and afterLogin) each have their own <transition name="bounceIn"> wrapping an <h1>. If your goal is to animate the entire child component switching (not just the h1 inside it), these inner transitions are unnecessary and might cause conflicts. You can safely remove them unless you specifically want the h1 to animate when the component mounts/unmounts.

3. Double-Check Your Transition CSS #

Even if you think you've met the activation conditions, make sure you've defined the correct CSS classes for your transition name.

• For Nuxt 3 (Vue 3), use this class pattern:

/* Pulse transition styles */
.pulse-enter-active, .pulse-leave-active {
  transition: all 0.5s ease;
}
.pulse-enter-from, .pulse-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

• For Nuxt 2 (Vue 2), the class names are slightly different (pulse-enter instead of pulse-enter-from, pulse-leave instead of pulse-leave-to).

Make sure these styles are included in your global CSS (like assets/css/main.css) or scoped to the account page.

Quick Recap of Fixes #

• Move both conditional divs inside the same <transition> component
• Add unique keys to each toggled element
• Verify your transition CSS matches the Vue version you're using
• Remove inner transitions in child components if they're not needed

内容的提问来源于stack exchange，提问作者J.Doe