Vue.js

# transition como Raiz
breaking

# Visão Geral

O uso de um <transition> como raiz de um componente não acionará mais transições quando o componente for alternado de fora.

# Comportamento v2.x

No Vue 2, era possível acionar uma transição de fora de um componente usando um <transition> como raiz do componente:

<!-- componente modal -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>
1
2
3
4
5
6
<!-- uso -->
<modal v-if="showModal">olá</modal>
1
2

Alternar o valor de showModal acionaria uma transição dentro do componente modal.

Isso funcionou por acidente, não por design. Uma <transition> deve ser desencadeada por alterações em seus filhos, não alternando a própria <transition>.

Esta peculiaridade foi removida.

# Estratégia de Migração

Um efeito semelhante pode ser obtido passando uma prop para o componente:

<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>
<script>
export default {
  props: ['show']
}
</script>
1
2
3
4
5
6
7
8
9
10
<!-- uso -->
<modal :show="showModal">olá</modal>
1
2

# Veja também

← Elemento Raiz para Transição em Grupo →