Vue.js

# Transition as Root
кардинальное изменение

# Overview

Using a <transition> as a component's root will no longer trigger transitions when the component is toggled from the outside.

# 2.x Behavior

In Vue 2, it was possible to trigger a transition from outside a component by using a <transition> as the component's root:

<!-- modal component -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>
1
2
3
4
5
6
<!-- usage -->
<modal v-if="showModal">hello</modal>
1
2

Toggling the value of showModal would trigger a transition inside the modal component.

This worked by accident, not by design. A <transition> is supposed to be triggered by changes to its children, not by toggling the <transition> itself.

This quirk has now been removed.

# Migration Strategy

A similar effect can be achieved by passing a prop to the component instead:

<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
<!-- usage -->
<modal :show="showModal">hello</modal>
1
2

# See also