Vue.js 2.1.0 transition

by Atinux

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router"></script>
<div id="app">
 <transition>
   <component :is="component"></component>
 </transition>
 <button @click="toggleComponent">Toggle Component</button>
</div>

Babel + JSX

var Foo = {
	template: '<p>Component Foo</p>'
}
var Bar = {
	template: '<p>Component Bar</p>'
}


new Vue({
	el: '#app',
  data () {
  	return {
    	component: Foo
	  }
  },
  methods: {
  	toggleComponent () {
    	if (this.component === Foo) {
      	this.component = Bar
      } else {
      	this.component = Foo
      }
    }
  }
});