The transition behavior of Vue3 is different from Vue2. When controlling with template outside of transition

Question

I am migrating from Vue2 to Vue3, but the transition behavior is different and I am having trouble.

this is vue2 code

https://codesandbox.io/p/sandbox/silent-surf-yth66k?file=%2Fsrc%2FApp.vue

<template>
  <div id="app">
    <div id="demo">
      <button v-on:click="show = !show">Toggle</button>

      <template v-if="show">
        <transition name="fade">
          <p>hello</p>
        </transition>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { show: true };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

this is Vue3 code

https://play.vuejs.org/#eNp9Uk1v1DAQ/SuDTyB1s6CKS0hXfKgHOACCPfpinEnWrWNb9iTdqtr/zjhOti1ClaLY897M8/N4HsSnEKppRFGLJuloAu2kw2PwkaDFTo2W4EE6gFaRev2m7AEi0hjdGgGkg7+rgeKIBTnlhX/8NduzLgeEQ7CKkCOA5s9I5B181Nbo2yspsgxcwau8SrHb+7632GxLWilZBWDamG4p4dSZ20flkiHDkk4NyGynWlxY5gPsDmitb7ahFGwfKxbgib9nAYeJ7m3eVll0g44wbpQmM+HFClpUEy5gaQ6dD6jBB6UN3cO76n0CVAk/zA16rthFP/yjR75oLfU1vC2F3NnZkrgQlLR3nemrm+Qdv+WcL4X2QzAW44+QHSQp6vXJpFDciLtvM5bfjc8suD6gvv0PfpOOGZPiZ8SEceK+njlSsUcq9PXv73jk/ZkcfDtazn6B/IXJ2zF7LGmfR9ey7Sd5s9uvQ55L4/p9uj4ScmOXS62Dd5rzpeCB/vLC1R/tXlaX66SK01/itgYx

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<template>
  <button @click="show = !show">Toggle</button>
  <template v-if="show">
  <Transition name="fade">
    <p >hello</p>
  </Transition>
  </template>
</template>

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

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

In both cases, a template is defined outside of Transition, and the template is used to control the animation. It worked fine with Vue2, but not working with Vue3. Please let me know if there is any way to deal with it.

thank you

I have no idea....

Answer 1

Your vue2 playground doesn't work for me, but if you want the fade transition to work in your vue3 code

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="fade">
    <p v-if="show">hello</p>
  </Transition>
</template>

This works for me. You can also add appear to toggle the animation on the initial render

<Transition name="fade" appear>

If you have the Transition inside the outter v-if then it makes sense that it won't trigger if it's false.