我想根据用户的操作动态更改发生的动画类型。因此,例如,当单击第一个按钮并调用离开动画时,“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>
最佳答案
您可以使用 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"
>
关于javascript - 如何动态更改 Vue.js 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41210314/