Transition and transitiongroup in Vue.js

What is Transition?

<Transition> is a built-in Vue component that applies enter/leave animations when an element or component is inserted, removed, or toggled in the DOM.

Basic Usage

vue

<template>
  <button @click="show = !show">Toggle</button>

  <Transition name="fade">
    <p v-if="show">Hello!</p>
  </Transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

CSS Class Flow

Vue automatically applies these CSS classes:

ENTER:  v-enter-from → v-enter-active → v-enter-to
LEAVE:  v-leave-from → v-leave-active → v-leave-to

With name="fade":

Class	When
`fade-enter-from`	Start state of enter
`fade-enter-active`	Active state during enter
`fade-enter-to`	End state of enter
`fade-leave-from`	Start state of leave
`fade-leave-active`	Active state during leave
`fade-leave-to`	End state of leave

Slide Transition Example

vue

<Transition name="slide">
  <div v-if="show" class="panel">Content</div>
</Transition>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>

JavaScript Hooks

vue

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
>
  <div v-if="show">Content</div>
</Transition>

<script setup>
function onEnter(el: Element, done: () => void) {
  // Use GSAP, anime.js, etc.
  gsap.from(el, { opacity: 0, y: -20, onComplete: done })
}

function onLeave(el: Element, done: () => void) {
  gsap.to(el, { opacity: 0, y: 20, onComplete: done })
}
</script>

TransitionGroup (Lists)

Animate list items entering, leaving, and moving:

vue

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

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* MOVE transition — smoothly rearranges items */
.list-move {
  transition: transform 0.3s ease;
}

/* Ensure leaving items are taken out of flow */
.list-leave-active {
  position: absolute;
}
</style>

<Transition> handles single element enter/leave animations with CSS classes or JavaScript hooks. <TransitionGroup> handles list animations including move transitions. Use mode="out-in" for smooth component switching. These are powerful built-in tools that require no additional libraries for most animations.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

Transition and transitiongroup in Vue.js

#What is Transition?

#Basic Usage

#CSS Class Flow

#Slide Transition Example

#JavaScript Hooks

#TransitionGroup (Lists)

#Transition Modes