SOURCE

Vue.component('child',{
  template:'<div>child</div>'
})
Vue.component('child-one',{
  template:'<div>child-one</div>'
})
var vm = new Vue({
  el:'#app',
  data:{
    type:true,
    com:'child'
  },
  methods:{
    handleClick(){
     this.type = !this.type;
      this.com = this.com==='child'?'child-one':'child'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js"></script>
<div id="app">
  <transition name="act" mode="in-out">
     <div v-if="type" key="hello"> hello world</div>
    <div v-else key="bye">bye world</div>
  </transition>
  <transition name="fade" :duration="{enter:5000,leave:500}">
     <div v-if="type"> hello world</div>
  </transition>
 <transition >
    <component :is="com"></component>
  </transition>
  <button @click="handleClick">change</button>
</div>

.act-enter{
  opacity:0;
}
.act-enter-active{
  transition: opacity 3s;
}
.act-leave-to{
  opacity:0;
}
.act-leave-active{
  transition: opacity 3s;
}
@keyframes bounce-in{
  0%{
    transform: scale(0);
  }
    50%{
    transform: scale(1.5);
  }
    100%{
    transform: scale(1);
  }
}
.fade-enter-active{
  transform-origin:left center;
  animation: bounce-in 3s;
}
.fade-leave-active{
  transform-origin:left center;
  animation: bounce-in 1s reverse;
}