Vue Transition

多个组件的过渡

by jacob hsu

HTML

<div id="demo">
  <button v-on:click="handleClick">
    Toggle
  </button>
  <transition name="fade" mode="out-in">
    <component :is="type"></component>
  </transition>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

Vue

Vue.component('child', {
	template: '<div>child</div>'
})
Vue.component('child-one', {
	template: '<div>child-one</div>'
})
new Vue({
  el: '#demo',
  data: {
    type: 'child'
  },
  methods: {
   	handleClick: function() {
 			this.type = this.type === 'child' ? 'child-one' : 'child'
    }
  }
})