Skip to content
On this page

<Transition> class names

The class name syntax changed a bit in Vue 3.

Vue 2

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

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

Vue 3

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

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

Mitigation

Provide both rules:

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

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

Linting

This compatibility cannot be supported by linting.

Released under the MIT license