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

如何动态更改Vue.js转换

1 个答案: