跳至内容

过渡类变更
重大变更

概述

v-enter 过渡类已重命名为 v-enter-fromv-leave 过渡类已重命名为 v-leave-from

2.x 语法

在 v2.1.8 之前,我们为每个过渡方向有两个过渡类:初始状态和活动状态。

在 v2.1.8 中,我们引入了 v-enter-to 来解决进入/离开过渡之间的时序差距。但是,为了向后兼容,v-enter 名称保持不变

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

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

这变得令人困惑,因为 enterleave 范围很广,并且没有使用与其类钩子对应项相同的命名约定。

3.x 更新

为了更加明确和易读,我们现在已重命名这些初始状态类

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

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

现在这些状态之间的区别更加清晰了。

Transition Diagram

<transition> 组件的相关 prop 名称也已更改

  • leave-class 已重命名为 leave-from-class(在渲染函数或 JSX 中可以写成 leaveFromClass
  • enter-class 已重命名为 enter-from-class(在渲染函数或 JSX 中可以写成 enterFromClass

迁移策略

  1. .v-enter 的实例替换为 .v-enter-from
  2. .v-leave 的实例替换为 .v-leave-from
  3. 替换上述相关的 prop 名称实例。

另请参阅