Skip to content
The translation is synced to the docs on of which the commit hash is 8a7fb04.

Mudança da Classe de Transição
rutura

Visão Geral

A classe de transição v-enter foi renomeada para v-enter-from e a classe de transição v-leave foi renomeada para v-leave-from.

Sintaxe da 2.x

Antes da v2.1.8, tínhamos duas classes de transição para cada direção de transição: estado inicial e em atividade.

Na v2.1.8, introduzimos a v-enter-to para abordar o intervalo de tempo entre as transições de entrada e saída. No entanto, por questões de compatibilidade com versões anteriores, o nome v-enter era intocável:

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

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

Isto tornou-se confuso, uma vez que enter e leave eram extensas e não usavam a mesma convenção de nomenclatura como os equivalentes de gatilho de classe.

Atualização da 3.x

No sentido de ser mais explícito e legível, agora renomeamos estas classes de estado inicial:

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

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

Agora está mais claro qual é a diferença entre estes estados.

Diagrama da Transição

Os nomes de propriedade relacionados ao componente <transition> também foram mudados:

  • leave-class foi renomeada para leave-from-class (pode ser escrita como leaveFromClass nas funções de interpretação ou JSX)
  • enter-class foi renomeada para leave-from-class (pode ser escrita como enterFromClass nas funções de interpretação ou JSX)

Estratégia de Migração

  1. Renomear as instâncias de .v-enter para .v-enter-from
  2. Renomear as instâncias de .v-leave para .v-leave-from
  3. Renomear as instâncias dos nomes de propriedades relacionadas, como acima.

Consulte Também