javascript - 如何动态更改 Vue.js 转换

Question

我想根据用户的操作动态更改发生的动画类型。因此，例如，当单击第一个按钮并调用离开动画时，“hello”元素应使用 bounceOutRight 动画。但是，如果用户单击第二个按钮，“hello”元素应该使用 bounceOutLeft 动画。这个例子来自vue.js documentation我正在尝试扩展它。正如在 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 data变量和以下内容将确保它是动态的:

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