title: Vue.js transition class disappearing before animation has finished
body: <p>I have create a Vue component that uses a javascript hook as a transition to call velocity.js and animate my components.</p>
  
  <p><a href="https://www.webpackbin.com/bins/-KiUnEo0HaCp3J4nQ9Gw" rel="nofollow noreferrer">https://www.webpackbin.com/bins/-KiUnEo0HaCp3J4nQ9Gw</a></p>
  
  <p>The <code>slideDown</code> of the component works fine. However when the <code>v-on:leave</code> kicks in. It seems the display CSS property is set to <code>display: none</code> immediately therefore my <code>slideUp</code> animation is not shown.</p>
  
  <p>I guess this happens because the transition animation duration is not known therefore is simply toggles between display <code>none</code> and <code>block</code>.</p>
  
  <p>How can I possible fix this though?</p>
  
  <p>Thanks.</p>