Vue 3.0 過(guò)渡的class名更改

#概覽

過(guò)渡類(lèi)名 v-enter 修改為 v-enter-from、過(guò)渡類(lèi)名 v-leave 修改為 v-leave-from。

#2.x 語(yǔ)法

在v2.1.8版本之前, 為過(guò)渡指令提供了兩個(gè)過(guò)渡類(lèi)名對(duì)應(yīng)初始和激活狀態(tài)。

在 v2.1.8 版本中, 引入 v-enter-to 來(lái)定義 enter 或 leave 變換之間的過(guò)渡動(dòng)畫(huà)插幀, 為了向下兼容, 并沒(méi)有變動(dòng) v-enter 類(lèi)名：

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


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

這樣做會(huì)帶來(lái)很多困惑, 類(lèi)似 enter 和 leave 含義過(guò)于寬泛并且沒(méi)有遵循類(lèi)名鉤子的命名約定。

#3.x 語(yǔ)法

為了更加明確易讀，我們現(xiàn)在將這些初始狀態(tài)重命名為：

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


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

現(xiàn)在，這些狀態(tài)之間的區(qū)別就清晰多了。

<transition> 組件相關(guān)屬性名也發(fā)生了變化：

• leave-class 已經(jīng)被重命名為 leave-from-class (在渲染函數(shù)或 JSX 中可以寫(xiě)為：leaveFromClass)
• enter-class 已經(jīng)被重命名為 enter-from-class (在渲染函數(shù)或 JSX 中可以寫(xiě)為：enterFromClass)

#遷移策略

1. 將 .v-enter 字符串實(shí)例替換為 .v-enter-from
2. 將 .v-leave 字符串實(shí)例替換為 .v-leave-from
3. 過(guò)渡組件相關(guān)屬性名也需要進(jìn)行字符串實(shí)例替換，規(guī)則如上所述。