如何动态改变Vue.js转换

Question

我想根据用户的动作动态地改变动画的类型。因此，例如，当单击第一个按钮并将离开动画命名为"hello“元素时，应该使用bounceOutRight动画。但是，如果用户单击第二个按钮，"hello“元素应该使用bounceOutLeft动画。这个例子来自vue.js 文档，我正在尝试对它进行扩展。与vue示例一样，它使用animate.css库。

我尝试使用v-bind:leave class=“动画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-绑定，您可以将转换的名称作为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"
>