过渡类变更 重大变更
概述
v-enter
过渡类已重命名为 v-enter-from
,v-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;
}
这变得令人困惑,因为 enter 和 leave 范围很广,并且没有使用与其类钩子对应项相同的命名约定。
3.x 更新
为了更加明确和易读,我们现在已重命名这些初始状态类
css
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-leave-from,
.v-enter-to {
opacity: 1;
}
现在这些状态之间的区别更加清晰了。
<transition>
组件的相关 prop 名称也已更改
leave-class
已重命名为leave-from-class
(在渲染函数或 JSX 中可以写成leaveFromClass
)enter-class
已重命名为enter-from-class
(在渲染函数或 JSX 中可以写成enterFromClass
)
迁移策略
- 将
.v-enter
的实例替换为.v-enter-from
- 将
.v-leave
的实例替换为.v-leave-from
- 替换上述相关的 prop 名称实例。