Fork me (vue@v1.0.24)

by Denis Karabaza

HTML

<script src="https://cdn.rawgit.com/vuejs/vue/v1.0.24/dist/vue.js"></script>
<div id="demo">
  <button @click="shown = !shown">Toggle</button>
  <div v-if="shown" transition="fade">Hello world!</div>
  <div v-if="fullyEntered">Fully entered</div>
  <!-- @NOTE: markup goes here -->
</div>

<hr/>
<ul>
  <li>vue <a href="https://cdn.rawgit.com/vuejs/vue/v1.0.24/dist/vue.js">v1.0.24</a></li>
  <li><a target="_blank" href="https://jsfiddle.net/simplesmiler/xto1h4k4/">vue-router fiddle</a></li>
</ul>

CSS

.fade-transition {
  transition: opacity 1s;
}

.fade-enter, .fade-leave {
  opacity: 0;
}

JavaScript

new Vue({
  el: '#demo',
  data: function() {
  	return {
    	shown: false,
      fullyEntered: false,
    };
  },
  transitions: {
  	fade: {
      afterEnter: function (el) {
      	this.fullyEntered = true;
      },
      beforeLeave: function (el) {
      	this.fullyEntered = false;
      },
    },
  },
});