<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="transition-components-demo" class="demo">

  <input v-model="view" type="radio" value="v-a" id="a" name="view"><label for="a">A</label>

  <input v-model="view" type="radio" value="v-b" id="b" name="view"><label for="b">B</label>

  <transition name="component-fade" mode="out-in">

    <component v-bind:is="view"></component>

  </transition>

</div>

<style>

.component-fade-enter-active, .component-fade-leave-active {

  transition: opacity .3s ease;

}

.component-fade-enter, .component-fade-leave-active {

  opacity: 0;

}

</style>

<script>

new Vue({

  el: '#transition-components-demo',

  data: {

    view: 'v-a'

  },

  components: {

    'v-a': {

      template: '<div>Component A</div>'

    },

    'v-b': {

      template: '<div>Component B</div>'

    }

  }

})

</script>