Dynamic transitions in Vue

Introduction

Dynamic transitions let you smoothly change how elements appear or disappear on your page. They make your app feel alive and easy to follow.

When you want to animate different elements with different effects based on user actions.

When you want to switch between multiple animations without writing separate code for each.

When you want to add smooth visual feedback for showing or hiding content dynamically.

When you want to reuse the same transition wrapper but change the animation style on the fly.

Syntax

Vue

<transition :name="transitionName">
  <element-to-animate v-if="showElement" />
</transition>

The :name attribute binds the transition class name dynamically.

The element inside <transition> must be conditionally rendered (like with v-if) to trigger the animation.

Examples

This example uses a dynamic transition name 'fade' to animate the div when it appears or disappears.

Vue

<template>
  <transition :name="currentTransition">
    <div v-if="show">Hello!</div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
const currentTransition = ref('fade')
</script>

This example lets the user pick between 'fade' and 'slide' transitions dynamically.

Vue

<template>
  <button @click="toggle">Toggle</button>
  <select v-model="currentTransition">
    <option value="fade">Fade</option>
    <option value="slide">Slide</option>
  </select>
  <transition :name="currentTransition">
    <p v-if="show">Dynamic transition example</p>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
const currentTransition = ref('fade')
function toggle() {
  show.value = !show.value
}
</script>

Sample Program

This Vue component lets you pick a transition style from a dropdown. When you toggle the box, it appears or disappears using the chosen animation. The box is keyboard accessible and uses ARIA roles for screen readers.

Vue

<template>
  <div>
    <label for="transition-select">Choose transition:</label>
    <select id="transition-select" v-model="transitionName" aria-label="Select transition">
      <option value="fade">Fade</option>
      <option value="slide">Slide</option>
      <option value="bounce">Bounce</option>
    </select>

    <button @click="toggleShow" aria-pressed="show">Toggle Box</button>

    <transition :name="transitionName">
      <div v-if="show" class="box" tabindex="0" role="region" aria-live="polite">
        Watch me {{ transitionName }}!
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(true)
const transitionName = ref('fade')

function toggleShow() {
  show.value = !show.value
}
</script>

<style scoped>
.box {
  width: 10rem;
  height: 10rem;
  background-color: #4f46e5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
  user-select: none;
  outline-offset: 0.25rem;
}

/* Fade transition */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* Slide transition */
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.slide-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* Bounce transition */
@keyframes bounce-in {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bounce-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.5); opacity: 0; }
}
.bounce-enter-active {
  animation: bounce-in 0.5s forwards;
}
.bounce-leave-active {
  animation: bounce-out 0.5s forwards;
}
</style>

Important Notes

Always use v-if inside <transition> to trigger animations properly.

Dynamic transitions let you reuse the same transition wrapper for many animation styles.

Use ARIA attributes and keyboard focus to keep animations accessible.

Summary

Dynamic transitions let you change animation styles on the fly in Vue.

Use the :name binding on <transition> to switch animations.

Combine with v-if to animate elements entering or leaving the page.