Vue transition for dynamic components

Question

For some reason vue transition is not working for my dynamic components. Here is my code.

<template>
    <div>
        <component :is="currentView" transition="fade" transition-mode="out-in"></component>

        <button class="btn btn-info" @click="currentView='category'">Cat</button>
        <button class="btn btn-info" @click="currentView='catvideo'">video</button>
    </div>
</template>

<script>
Vue.component('category', require('./category.vue'));
Vue.component('catvideo', require('./catvideo.vue'));
export default {
    data(){
        return {
            currentView: 'category',
            cat:cat,
            showCat:false,
            showVideo:false
        }
    }
 }
 </script>
<style>

.fade-transition {
   transition: opacity 0.2s ease;
 }

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

I have category.vue file in a separate folder and inside that I have a loop over some data and catvideo.vue is a simple static html.

Thanks in advance.

Answer 1

Ok I solved it. I need to use the transition tag outside the component tag. :)

Answer 2

<template>
  <div>
    <transition name="fade" mode="out-in">
      <keep-alive>
        <component v-bind:is="componentPage"></component>
      </keep-alive>
    </transition>

    <button class="btn btn-info" v-on:click="componentPage = 'category-Page'">
      Cat
    </button>
    <button class="btn btn-info" v-on:click="componentPage = 'catvideo-Page'">
      video
    </button>
  </div>
</template>

<script>
import category from "@./category.vue";
import catvideo from "@./catvideo.vue";

export default {
  name: "category",
  components: {
    "category-Page": category,
    "catvideo-Page": catvideo,
  },
  data() {
    return {
      componentPage: "category-Page",
    };
  },
  methods: {
    tabs() {},
  },
};
</script>

<style>
.fade-transition {
  transition: opacity 0.2s ease;
}

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