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 "hello" element should use the bounceOutRight animation. However, if the user clicks the second button the "hello" element should use the bounceOutLeft animation. This example es from the vue.js documentation and I am trying to expand on it. As in the vue example it uses the animate.css library.

I tried using v-bind:leave-active-class="animated bounceOutRight" but that threw an error as an invalid expression.

<button @click="show = !show">
  Toggle Bounce Right
</button>
<button @click="show = !show">
  Toggle Bounce Left
</button>
<transition
  name="custom-classes-transition"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight"
>
  <p v-if="show">hello</p>
</transition>

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 "hello" element should use the bounceOutRight animation. However, if the user clicks the second button the "hello" element should use the bounceOutLeft animation. This example es from the vue.js documentation and I am trying to expand on it. As in the vue example it uses the animate.css library.

I tried using v-bind:leave-active-class="animated bounceOutRight" but that threw an error as an invalid expression.

<button @click="show = !show">
  Toggle Bounce Right
</button>
<button @click="show = !show">
  Toggle Bounce Left
</button>
<transition
  name="custom-classes-transition"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight"
>
  <p v-if="show">hello</p>
</transition>

• javascript
• css
• animation
• vue.js

1 Answer 1

You can use v-bind for this purpose, you can have name of transition as vue data variable and following will make sure it is dynamic:

<transition
  v-bind:name="className"
  v-bind:enter-active-class="enterClassName"
  v-bind:leave-active-class="leaveClassName"
>

or in short

<transition
  :name="className"
  :enter-active-class="enterClassName"
  :leave-active-class="leaveClassName"
>