# Transition as Root
breaking
# 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
2
3
4
5
6
<!-- usage -->
<modal v-if="showModal">hello</modal>
1
2
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
2
3
4
5
6
7
8
9
10
<!-- usage -->
<modal :show="showModal">hello</modal>
1
2
2