Skip to content

Vue Transitions and Animations Explained — Motion in Vue

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Vue Transitions and Animations Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue provides the Transition and TransitionGroup components for applying enter/leave animations when elements are inserted, updated, or removed from the DOM.

What You'll Learn

  • Transition component basics
  • CSS transition classes (enter-from, enter-active, leave-to)
  • JavaScript animation hooks
  • TransitionGroup for lists
  • Page transitions with Vue Router

Why It Matters

Smooth animations improve user experience and guide attention. Vue's transition system abstracts the complexity of animation timing and state management.

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

    <Transition name="fade">
      <p v-if="show" key="content">Hello Vue Transitions!</p>
    </Transition>

    <Transition name="slide">
      <div v-if="show" key="panel" class="panel">
        Sliding panel content
      </div>
    </Transition>

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

<style scoped>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.slide-enter-active, .slide-leave-active { transition: transform 0.3s; }
.slide-enter-from { transform: translateX(-100%); }
.slide-leave-to { transform: translateX(100%); }

.list-enter-active, .list-leave-active { transition: all 0.3s; }
.list-enter-from, .list-leave-to { opacity: 0; transform: translateY(20px); }
.list-move { transition: transform 0.3s; }
</style>

Expected output: Elements fade and slide on toggle, list items animate enter/leave and reorder smoothly.

← Previous Vue Custom Directives Explained — Extending HTML Next → Vue Testing Explained — Unit and Component Testing

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Vue