How to implement transitions and animations in Vue?

To add transitions and animations in Vue, use built-in components like <transition> and <transition-group>, apply CSS classes, leverage transition hooks for control, and optimize performance. 1. Wrap elements with <transition> and apply CSS transition classes like v-enter-active for basic fade or slide effects. 2. Use <transition-group> for animating dynamic lists, ensuring each item has a key attribute for proper tracking. 3. Apply transition hooks such as @before-enter and @enter for JavaScript-based animation control, useful with libraries like GSAP. 4. Optimize performance by using hardware-accelerated properties like opacity and transform, and avoid excessive animations that can slow down the app, especially on mobile devices.

Adding transitions and animations in Vue makes your app feel more dynamic and polished. The good news is, Vue gives you built-in tools to do this without relying on heavy external libraries.

Using <transition></transition> for Basic Transitions

Vue’s <transition></transition> wrapper is perfect for simple transitions like fading or sliding elements in and out. It works with any element that enters or leaves the DOM—like when using v-if, v-show, or list rendering.

Here's how it works:

• Wrap the element you want to animate with <transition></transition>
• Apply CSS transition classes like v-enter-active, v-leave-active, and v-enter

For example:

<transition name="fade">
  <p v-if="showText">This text fades in and out</p>
</transition>

And the CSS:

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter {
  opacity: 0;
}

You’ll notice the element fades instead of just popping in/out. This works great for modals, tooltips, and conditional content.

Animate Lists with <transition-group>

When dealing with lists, especially ones that change dynamically, <transition-group> is your go-to. Unlike <transition>, it animates multiple items entering, leaving, or moving within a list.

One key thing to remember:

• Use key attributes on each item so Vue can track them properly
• You might need to add display: inline-block or flex depending on layout

Example:

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

With matching CSS:

.list-enter-active {
  transition: all 0.4s;
}
.list-enter {
  opacity: 0;
  transform: translateY(20px);
}

This setup makes list items smoothly appear and shift into place when added or removed.

Use Transition Hooks for More Control

Sometimes you need more than CSS—like triggering animations based on JavaScript logic. Vue provides hooks like @before-enter, @enter, and @after-enter for fine-grained control.

This comes in handy when integrating with animation libraries like GSAP or anime.js. For instance, if you're doing complex SVG animations, these hooks let you time things perfectly.

Basic usage:

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <div v-show="isVisible">Animated Content</div>
</transition>

In your methods, define what happens at each stage. It’s not something you’ll use every day, but super useful when you need custom timing or effects.

Keep Performance in Mind

Animations look great, but too many at once can slow down your app—especially on mobile. Stick to hardware-accelerated properties like opacity and transform instead of animating things like width or height.

Also, avoid overusing transitions on every little element. Pick key parts of your UI where animation adds value—like main navigation changes, form submissions, or loading states.

If you're looping through a large dataset and animating each item, consider disabling animations during initial render or bulk updates.

That’s basically it. Vue makes transitions easy enough for quick effects, but flexible enough for more advanced setups. Just start simple, layer in complexity as needed, and always test performance on real devices.

The above is the detailed content of How to implement transitions and animations in Vue?. For more information, please follow other related articles on the PHP Chinese website!