如何动态更改 Vue.js 过渡

Question

我想根据用户的操作动态更改发生的动画类型。例如，当第一个按钮被点击并且离开动画被调用时，“hello”元素应该使用bounceOutRight动画。但是，如果用户单击第二个按钮，“hello”元素应该使用bounceOutLeft 动画。这个例子来自 vue.js documentation，我正在尝试扩展它。与 vue 示例一样，它使用 animate.css 库。

我尝试使用 v-bind:leave-active-class="animatedbounceOutRight" 但作为无效表达式引发了错误。

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