开始时间：2019-11-29

  • 目标主要版本：3.x
  • 引用 issue：N/A
  • 实现的 PR：N/A

摘要

将 transition 的 v-enter class 重命名为 v-enter-from
将 transition 的 v- leave class 重命名为 v-leave-from
将 transition 的 v-appear class 重命名为 v-appear-from

基本范例

  1. /* before */
  2. .v-enter, .v-leave-to{
  3.   opacity: 0;
  4. }
  6. /* after */
  7. .v-enter-from, .v-leave-to{
  8.   opacity: 0;
  9. }

动机

在 v2.1.8 版本之前，我们每个 transition 方向只有两个 transition class。例如，对于进入 transition，我们有 v-enter 和 v-enter-active。在 v2.1.8 版本中，我们引入了 v-enter-to，以解决进入/离开 transition 之间的时间差距，但是，为了向后兼容，v-enter 的名称没有被改变。

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

.v-enter 和 .v-leave 中的不对称性和缺乏明确性使得这些 class 在阅读和理解上有些费脑筋。这就是为什么我们提议将上述内容改为：

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

…… 这更好的表明了这些类适用于什么状态。

具体设计

  • v-enter 改名为 v-enter-from
  • v-leave 改名为 v-leave-from
  • v-appear 改名为 v-appear-from
  • 组件的属性名也发生了变化：
    • leave-class 改名为 leave-from-class（在渲染函数或 JSX 中，可以写成 leaveFromClass）。
    • enter-class 改名为 enter-from-class（在渲染函数或 JSX 中，可以写成 enterFromClass）。
    • appear-class 改名为 appear-from-class（在渲染函数或 JSX 中，可以写成 appearFromClass）。

缺点

N/A

备选方案

N/A

采纳策略

在 compat 构建中，可以轻松支持旧的类名，并带有警告以指导迁移。

没有解决的问题

N/A