title: Vue.js change a leave transition dynamically after enter has been played
body: <p>I have a dynamic transition that tells my element to move left or right (it's a slider element). Since by default Vue only allows me to execute one transition, I'm using a dynamic transition property:</p>
  
  <pre><code>&lt;transition v-bind:name="'slider-' + slideDirection"&gt;
  </code></pre>
  
  <p>Now, this slider has an enter and a leave transition, which adjusts according to the direction it's appearing or leaving to. All seem well, but..</p>
  
  <p>When the element fills the condition for appearing, enter and enter-to transitions are executed properly, always. But leave and leave-to transitions do not get the updated direction if it's changed after the element appeared.</p>
  
  <p>Here is a fiddle showing what I mean:</p>
  
  <p><a href="https://jsfiddle.net/nxLmdk9q/4/" rel="nofollow noreferrer">https://jsfiddle.net/nxLmdk9q/4/</a></p>
  
  <p>In this example everything works, except as soon as you change directions, the element gets the previous direction animation for leave-to.</p>
  
  <p>How can I fix this?</p>