title: Vue.js call transition explicitly
body: <p>I know the typical way for doing animations in Vue.js, adding the <code>transition="my-animation"</code> on the HTML element.</p>
  
  <p>I'm wondering if can I call explicitly that animation form code and not just depending on <code>v-show</code> / <code>v-if</code>.</p>
  
  <p>I'd like to "shake" a component (A) each time another one (B) is clicked. For that I use a <code>pulse</code> transition (from animated.css).</p>
  
  <p>For the moment B dispatches a message each time is clicked.</p>
  
  <p>A receives the message and sets it's property <code>animate</code> to true. Then A shakes thanks to, in the HTML:</p>
  
  <pre><code>&lt;div id="A" class="animated" 
      transition="pulse" 
      v-show="show" 
      v-bind:class="{ 'pulse': animate }"
   &gt;
  </code></pre>
  
  <p>Onces it's being animated, won't do it anymore, since A's <code>animate</code>prop is already set to true. I'd need to reset it to false so on next click the component could shake again.</p>
  
  <p>I've tried with the transition hooks:</p>
  
  <pre><code>Vue.transition('pulse', {
          afterLeave: function (el) {
              this.animate = false;
          },
  })
  </code></pre>