Vue.js Transitions and Animations

In Vue.js, transitions and animations are key features that enhance the user experience by adding smooth visual effects to component changes, such as adding, updating, or removing elements from the DOM. Vue provides an easy way to integrate these effects with minimal configuration.

Introduction to Vue.js Transitions and Animations

What Are Transitions and Animations?

In web development, transitions and animations are techniques to control changes in appearance or position. Transitions smoothly shift between two states, while animations define keyframes to create continuous motion.

Vue.js offers:

  • Transitions: These handle adding, updating, or removing elements from the DOM, animating the appearance or disappearance.
  • Animations: These apply more complex keyframe-based animations to elements.

Why Use Transitions and Animations?

Transitions and animations make an application feel more interactive and polished. By adding these effects, you improve the overall user experience by providing feedback during state changes (e.g., opening modals, navigating between routes).

Basic Transition with the Component

The <transition> component in Vue is used to apply transitions to a single element or component. It automatically applies classes when elements enter or leave the DOM, which can be styled using CSS.

Example: A Simple Fade Transition

				
					<template>
  <div>
    <button @click="show = !show">
      Toggle Visibility
    </button>
    <transition name="fade">
      <p v-if="show">Hello, Vue.js Transitions!</p>
    </transition>
  </div>
</template> <script type="litespeed/javascript">export default{data(){return{show:!0,}},}</script> <style>.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}</style>

Explanation:

  • The <transition> component wraps the element you want to transition (<p> in this case).
  • The v-if="show" directive toggles the visibility of the element.
  • Vue automatically applies these classes:
    • fade-enter: Applied when the element is inserted.
    • fade-enter-active: Applied throughout the transition duration.
    • fade-leave-active: Applied when the element is leaving.
    • fade-leave-to: Applied when the transition ends.

Output:

  • Initially, the text "Hello, Vue.js Transitions!" is visible.
  • Clicking the button toggles the visibility with a fade effect (0.5s duration).

Applying CSS Transitions

Vue transitions are often implemented with CSS for simple effects. CSS transitions control how an element’s style changes over time, such as opacity, height, or color.

Example: Sliding an Element in and Out

				
					<template>
  <div>
    <button @click="isVisible = !isVisible">Toggle Slide</button>
    <transition name="slide">
      <div v-if="isVisible" class="box">Slide Me!</div>
    </transition>
  </div>
</template> <script type="litespeed/javascript">export default{data(){return{isVisible:!1,}},}</script> <style>.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(100%);
}
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-top: 20px;
}</style>

Explanation:

  • The slide transition slides the .box element horizontally.
  • slide-enter and slide-leave-to set the start and end positions using transform: translateX(100%).
  • The transition property defines the duration and easing for the sliding effect.

Output:

  • When the button is clicked, the box slides in from the right, and on the next click, it slides back out.

Using JavaScript Hooks for Transitions

Vue allows you to use JavaScript hooks to control the transition process manually. These hooks are useful for more complex animations, where you need more control than CSS can provide.

Example: JavaScript Hook for Transition

				
					<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave">
      <div v-if="show" class="box">JavaScript Animation</div>
    </transition>
  </div>
</template> <script type="litespeed/javascript">export default{data(){return{show:!1,}},methods:{beforeEnter(el){el.style.opacity=0},enter(el,done){setTimeout(()=>{el.style.transition="opacity 1s";el.style.opacity=1;done()},0)},leave(el,done){el.style.transition="opacity 1s";el.style.opacity=0;setTimeout(()=>{done()},1000)},},}</script> <style>.box {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  margin-top: 20px;
  opacity: 1;
}</style>

Explanation:

  • beforeEnter: Initializes the element’s opacity before it enters.
  • enter: Defines a transition to gradually increase the opacity over 1 second.
  • leave: Gradually decreases the opacity when the element leaves.
  • done: A callback function that must be called after the animation is complete.

Output:

  • The box element fades in and out smoothly using JavaScript for more controlled animation.

Transition Modes

Vue offers transition modes to control the timing of transitions between elements.

Modes:

  • in-out: New elements transition in first, then the old element transitions out.
  • out-in: The old element transitions out first, then the new element transitions in.

Example: Using Transition Modes

				
					<template>
  <div>
    <button @click="toggle = !toggle">Switch</button>
    <transition name="fade" mode="out-in">
      <p v-if="toggle" key="1">First Element</p>
      <p v-else key="2">Second Element</p>
    </transition>
  </div>
</template> <script type="litespeed/javascript">export default{data(){return{toggle:!0,}},}</script> <style>.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}</style>

Explanation:

  • The out-in mode ensures the first element transitions out fully before the second element enters.
  • Each element has a unique key to distinguish them.

Output:

  • Clicking the button switches between “First Element” and “Second Element,” ensuring smooth transition with the out-in mode.

Group Transitions with

The <transition-group> component allows you to animate lists of items.

Example: Animating a List of Items

				
					<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item" class="list-item">{{ item }}</li>
    </transition-group>
  </div>
</template> <script type="litespeed/javascript">export default{data(){return{items:[1,2,3],}},methods:{addItem(){this.items.push(this.items.length+1)},},}</script> <style>.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-item {
  margin: 5px;
  background-color: lightgreen;
  padding: 10px;
  list-style: none;
}</style>

Explanation:

  • The <transition-group> component handles transitions for a list of li items.
  • When new items are added, they smoothly transition into place using the defined CSS.

Output:

  • When the button is clicked, a new item is added to the list with a smooth sliding transition.

Animating with Third-Party Libraries (e.g., Animate.css)

Vue allows you to easily integrate third-party CSS animation libraries like Animate.css to create more complex animations.

Example: Using Animate.css

				
					<template>
  <div>
    <button @click="show = !show">Animate</button>
    <transition name="animate__animated animate__bounce">
      <p v-if="show">Bounce In!</p>
    </transition>
  </div>
</template> <script type="litespeed/javascript">export default{data(){return{show:!1,}},}</script> <style>@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';</style>

Explanation:

  • The Animate.css classes like animate__bounce can be used within Vue’s <transition> component.
  • When the element appears, it bounces into view.

Output:

  • The text “Bounce In!” bounces into view when the button is clicked.

Custom Animations with CSS Keyframes

Keyframe animations allow you to define complex animations that move elements in a more intricate way compared to simple transitions.

Example: CSS Keyframes in Vue

				
					<template>
  <div>
    <button @click="show = !show">Custom Animation</button>
    <transition name="custom">
      <div v-if="show" class="box">Keyframe Animation</div>
    </transition>
  </div>
</template> <script type="litespeed/javascript">export default{data(){return{show:!1,}},}</script> <style>@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.custom-enter-active, .custom-leave-active {
  animation: move 1s ease;
}
.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin-top: 20px;
}</style>

Explanation:

  • Keyframes are used to animate the element from 0px to 100px and back.
  • The animation is triggered when the element enters or leaves the DOM.

Output:

  • The box moves horizontally as it enters or leaves with the keyframe-defined movement.

Dynamic Transitions Between Routes

Vue Router provides a powerful way to animate transitions between different routes in a Vue application.

Example: Route Transitions

				
					<template>
  <transition name="fade">
    <router-view></router-view>
  </transition>
</template><style>.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}</style>

Explanation:

  • By wrapping the router-view component with <transition>, you can apply animations between routes.
  • The example uses a fade transition when navigating between pages.

Output:

  • When switching routes, the new page fades in, and the old page fades out.

Performance Considerations for Animations

While animations improve the user experience, excessive or poorly optimized animations can hurt performance, especially on mobile devices. Here are some best practices:

  • Limit DOM manipulations: Avoid animating large elements or too many elements at once.
  • Use CSS over JavaScript: CSS animations are handled by the browser’s compositor and are often more efficient.
  • Consider hardware acceleration: Use transform and opacity properties to trigger GPU acceleration.

Vue.js provides a robust and flexible system for implementing transitions and animations. Whether you're using basic CSS transitions, JavaScript hooks, third-party libraries, or advanced keyframe animations, Vue’s built-in and components make it easy to apply these effects with minimal effort. By understanding these concepts, you can create smooth, interactive, and polished web applications that enhance the user experience. Happy Coding!❤️

Table of Contents

Popular Tutorials

Contact here

Copyright © 2025 Diginode

Made with ❤️ in India

Home
Roadmap
ATS Resume
Playground
Resources