Vue.js

# Использование transition корневым элементом
кардинальное изменение

# Обзор

Использование <transition> в качестве корневого элемента компонента больше не будет вызывать анимации перехода, когда отображение компонента переключается снаружи.

# Поведение в 2.x

Во Vue 2 можно запускать анимации перехода снаружи компонента, используя <transition> в качестве корневого элемента компонента:

<!-- компонент модального окна -->
<template>
  <transition>
    <div class="modal">
      <slot/>
    </div>
  </transition>
</template>
1
2
3
4
5
6
7
8
<!-- использование -->
<modal v-if="showModal">привет</modal>
1
2

Переключение значения showModal будет запускать анимации перехода внутри компонента модального окна.

Это работало по случайности, так не было задумано. Предполагается, что <transition> вызывается изменениями в его дочерних элементах, а не переключением самого <transition>.

Теперь эта недоработка устранена.

# Стратегия миграции

Аналогичного эффекта можно добиться с помощью передачи входного параметра компоненту:

<!-- компонент модального окна -->
<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
11
12
13
14
<!-- использование -->
<modal :show="showModal">привет</modal>
1
2

# См.также

← Корневой элемент transition-group больше не создаётся →