title: Event Driven Transitions in Vue.js
body: <p>Is there any way to manually or programmatically trigger an enter or leave transition in vue.js?</p>
  <p>From reading the <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">documentation</a> it seems that transitions only ever trigger for v-if and v-show.</p>
  <p>However, my use-case is to animate the movement of an element from one position to another on one user event, and move it back on a second user event.</p>
  <p>The animations themselves are easy to achieve using Velocity, but I am having issues triggering them when required.</p>
  <p>I don't want to change the visibility or presence of the element, so switching v-show and v-if to start the transition is out of the question.</p>
  <p>I have tried using a key on the element, but this is basically the same as creating and destroying it, causing both enter and leave transitions (move and move back) to fire sequentially.</p>
  <p>Is there any way to manually trigger an enter transition, then subsequently trigger the leave transition, while preserving the visibility of the element itself?</p>
  <p>For illustration here is a <a href="https://codepen.io/Dalaigh88/pen/poomOqv" rel="nofollow noreferrer">codepen</a> with the move animations set up for enter and leave.</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
    &lt;transition 
      name=&quot;move&quot;
      @enter=&quot;enter&quot;           
      @leave=&quot;leave&quot;
      @after-enter=&quot;afterEnter&quot;              
      @after-leave=&quot;afterLeave&quot;              
    &gt;
      &lt;div 
        id=&quot;moveMe&quot;
        @click=&quot;itemClick&quot;
        :key=&quot;itemKey&quot;&gt;
      &lt;/div&gt;
    &lt;/transition&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>var app = new Vue({
    el: &quot;#app&quot;,
    data: {
      itemKey: 0
    },
    methods: {
      itemClick() {
        this.itemKey++
      },
      enter(el, done) {
        Velocity(el, { left: '200px'}, {
            duration: 500,
            complete: function() {
              done()
            }
          })  
      },
      afterEnter(el) {
        el.style.left = &quot;200px&quot;
      },
      leave(el, done) {
        Velocity(el, { left: '0px'}, {
            duration: 500,
            complete: function() {
              done()
            }
          })  
      },
      afterLeave(el) {
        el.style.left = &quot;0px&quot;
      }
    }
  })
  </code></pre>
  <p>What I am trying to achieve is to trigger the enter (move right) animation on click of the element, and then trigger the leave (move left) animation on second click of the element.</p>