<script src="https://unpkg.com/vue/dist/vue.js"></script>

​

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="dynamic-fade-demo" class="demo">

  Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">

  Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">

  <transition v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave">

    <p v-if="show">hello</p>

  </transition>

  <button v-on:click="stop = true">Stop it!</button>

</div>

<script>

new Vue({

  el: '#dynamic-fade-demo',

  data: {

    show: true,

    fadeInDuration: 1000,

    fadeOutDuration: 1000,

    maxFadeDuration: 1500,

    stop: false

  },