炫意html5
最早CSS3和HTML5移动技术网站之一

[Vue.js 3.0] Migration – Transition Class Change

# 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;
}

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;
}

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

  • <TransitionGroup> now renders no wrapper element by default

炫意HTML5 » [Vue.js 3.0] Migration – Transition Class Change

CSS3教程HTML5教程