Vue.js

# Transition Class Change
breaking

# Overview

The v-enter transition class has been renamed to v-enter-from and the v-leave transition class has been renamed to v-leave-from.

# 2.x Syntax

Before v2.1.8, we had two transition classes for each transition direction: initial and active states.

In v2.1.8, we introduced v-enter-to to address the timing gap between enter/leave transitions. However, for backward compatibility, the v-enter name was untouched:

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-leave,
.v-enter-to {
  opacity: 1;
}
1
2
3
4
5
6
7
8
9

This became confusing, as enter and leave were broad and not using the same naming convention as their class hook counterparts.

# 3.x Update

In order to be more explicit and legible, we have now renamed these initial state classes:

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}
1
2
3
4
5
6
7
8
9

It's now much clearer what the difference between these states is.

Transition Diagram

The <transition> component's related prop names are also changed:

  • leave-class is renamed to leave-from-class (can be written as leaveFromClass in render functions or JSX)
  • enter-class is renamed to enter-from-class (can be written as enterFromClass in render functions or JSX)

# Migration Strategy

  1. Replace instances of .v-enter to .v-enter-from
  2. Replace instances of .v-leave to .v-leave-from
  3. Replace instances of related prop names, as above.

# See also

← Transition as Root →