javascript - How to dynamically change Vue.js transition - Stack Overflow

admin管理员组

文章数量:1349231

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

Share Improve this question Follow edited Jul 13, 2022 at 22:57 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Dec 18, 2016 at 16:16 dpstdpst 1,28311 gold badge1515 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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"
>

本文标签： javascriptHow to dynamically change Vuejs transitionStack Overflow