Vue Transition Packaged

by jacob hsu

HTML

<div id="demo">
   <button @click="handleClick">
    Toggle
  </button>
  <fade :show="show">
    <div>hello</div>
  </fade>
   <fade :show="show">
    <h1>world</h1>
  </fade>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Vue

Vue.component('fade', {
	props:['show'],
	template: `
  	<transition name="fade" 
    	@before-enter="handleBeforeEnter"
      @enter="handleEnter">
    	<slot v-if="show"></slot>
    </transition>`,
  methods: {
   	handleBeforeEnter: function(el) {
 			el.style.color = 'red'
    },
    handleEnter: function(el, done) {
 			setTimeout( () =>{
      	el.style.color = 'green'
        done()
      } ,2000)
    },
  }
})

new Vue({
  el: '#demo',
  data: {
    show: false
  },
  methods: {
   	handleClick: function() {
 			this.show = !this.show
    }
  }
})