[Vuejs]-Vue: How to trigger transitions for dynamic components instances that use the same template

by

0👍

Check if you have imported the tailwind css correctly because I have recreated your problem and it seems everything works perfectly,

const Demo = {
  data() {
    return {
      view: 'v-a'
    }
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
}

Vue.createApp(Demo).mount('#demo')
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}

.component-fade-enter-from,
.component-fade-leave-to {
  opacity: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/vue@next"></script>
<div id="demo">
  <h3>Vue.js Demo</h3>
  <input v-model="view" type="radio" value="v-a" id="a"><label for="a">A</label>
  <input v-model="view" type="radio" value="v-b" id="b"><label for="b">B</label>
  <transition name="component-fade" mode="out-in">
    <component :is="view"></component>
  </transition>
  <br>
  <br>
  
  <h3>Your Code</h3>

  
  <transition enter-active-class="duration-500 ease-out" enter-class="translate-x-full opacity-0" enter-to-class="translate-x-0 opacity-100" leave-active-class="duration-500 ease-in" leave-class="translate-x-0 opacity-100" leave-to-class="translate-x-full opacity-0"
    mode="out-in">
    <component :is="view" />
  </transition>
</div>

Leave a comment