Vue 3 Transition wrapper

[CovorSorin]

I'm working on migrating a Vue 2 app to version 3.

In Vue 2, I had a wrapper inside a component and the transition would trigger when toggling the visibility of the parent, but this doesn't seem to work properly in Vue 3.

I've attached an example below, both approaches work in Vue 2, but in Vue 3, only approach 1 works, approach 2 only animates on enter.

Is this the intended behavior or am I doing something wrong?

// AppLabel.vue
<template>
  <Transition appear>
    <div>
      Hello
    </div>
  </Transition>
</template>

<template>
  <button @click="show = !show">Toggle</button>

  <!-- APPROACH 1 -->
  <Transition appear>
    <div v-if="show">Hello</div>
  </Transition>

  <div style="width: 100px; border-bottom: 2px solid black"></div>

  <!-- APPROACH 2 -->
  <AppLabel v-if="show" />
</template>

<script>
import AppLabel from '@/components/AppLabel.vue'

export default {
  name: 'AppButton',
  components: {
    AppLabel
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

[Justineo]

See https://v3-migration.vuejs.org/breaking-changes/transition-as-root.html.

[CovorSorin]

Ooh, I must've missed that. Thank you!