title: How to dynamically change Vue.js transition
body: <p>I want to dynamically change what kind of animation happens depending on a user's action. So for example, when the first button is clicked and the leave animation is called the &quot;hello&quot; element should use the bounceOutRight animation. However, if the user clicks the second button the &quot;hello&quot; element should use the bounceOutLeft animation. This example comes from the vue.js <a href="https://v2.vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes" rel="nofollow noreferrer">documentation</a> and I am trying to expand on it. As in the vue example it uses the animate.css library.</p>
  <p>I tried using v-bind:leave-active-class=&quot;animated bounceOutRight&quot; but that threw an error as an invalid expression.</p>
  <pre><code>&lt;button @click=&quot;show = !show&quot;&gt;
    Toggle Bounce Right
  &lt;/button&gt;
  &lt;button @click=&quot;show = !show&quot;&gt;
    Toggle Bounce Left
  &lt;/button&gt;
  &lt;transition
    name=&quot;custom-classes-transition&quot;
    enter-active-class=&quot;animated tada&quot;
    leave-active-class=&quot;animated bounceOutRight&quot;
  &gt;
    &lt;p v-if=&quot;show&quot;&gt;hello&lt;/p&gt;
  &lt;/transition&gt;
  </code></pre>