Transition modes (in-out, out-in) in Vue

Introduction

Transition modes control how Vue switches between elements during animations. They help make smooth visual changes when content updates.

When you want one element to fade out before another fades in.

When you want two elements to animate at the same time during a switch.

When you want to avoid flickering or overlapping content during transitions.

When you want to control the order of entering and leaving animations.

When you want a cleaner user experience during component swaps.

Syntax

Vue

<transition mode="in-out|out-in"> ... </transition>

The mode attribute accepts two values: in-out and out-in.

in-out means the new element enters first, then the old leaves.

out-in means the old element leaves first, then the new enters.

Examples

The new component appears first, then the old component disappears.

Vue

<transition mode="in-out">
  <component :is="view" />
</transition>

The old component disappears first, then the new component appears.

Vue

<transition mode="out-in">
  <component :is="view" />
</transition>

Sample Program

This Vue component toggles between two views labeled 'A' and 'B'. The transition uses mode="out-in" so the old box fades out fully before the new box fades in. This avoids overlap and flicker.

Vue

<template>
  <div>
    <button @click="toggle">Toggle View</button>
    <transition name="fade" mode="out-in">
      <div :key="view" class="box">
        {{ view }}
      </div>
    </transition>
  </div>
</template>

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

const view = ref('A')
function toggle() {
  view.value = view.value === 'A' ? 'B' : 'A'
}
</script>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #42b983;
  color: white;
  font-weight: bold;
  border-radius: 0.5rem;
  margin-top: 1rem;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

Important Notes

Use mode only on <transition> components wrapping a single element or component.

Without mode, Vue runs enter and leave animations simultaneously.

Choose in-out or out-in depending on which animation order looks better for your UI.

Summary

Transition modes control the order of enter and leave animations.

in-out: new element enters first, old leaves after.

out-in: old element leaves first, new enters after.