如何动态更改Vue.js转换

Question

我想根据用户的动作动态地改变发生什么样的动画.因此,例如,当单击第一个按钮并调用离开动画时,"hello"元素应使用bounceOutRight动画.但是,如果用户单击第二个按钮,则"hello"元素应使用bounceOutLeft动画.这个例子来自vue.js 文档,我正在尝试扩展它.与在vue示例中一样,它使用animate.css库.

我尝试使用v-bind:leave-active-class ="animated bounceOutRight"但是将错误作为无效表达式抛出.

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

Answer 1

您可以将v-bind用于此目的,您可以将转换名称作为vue数据变量,以下将确保它是动态的:

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

或简而言之

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