[Vuejs]-Vue transition for dynamic components

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

<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>