vue fadein

html

<div id="demo">
  <button v-on:click="fadeMe">
    Toggle
  </button>
  <transition name="fade" v-on:enter="enter">
    <p v-if="show">hello</p>
  </transition>
</div>

 

css

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

.fade-enter,
.fade-leave-to
/* .fade-leave-active in <2.1.8 */

{
  opacity: 0
}

 

js

 

new Vue({
  el: '#demo',
  data: {
    show: false
  },

  methods: {

    fadeMe: function() {
      this.show = !this.show
    },

    enter: function(el, done) {

      var that = this;

      setTimeout(function() {
        that.show = false;
      }, 3000); // hide the message after 3 seconds
    }

  }

})