如何动态修改Vue中Transition的自定义过渡的类名？

Question

问题描述

使用Animate.css实现组件切换效果，我想动态修改动画效果，但是transition的下面两个类名（enter-active-class，leave-active-class）不能绑定，拿到DOM直接修改也不行

相关代码

<transition

  name="fade"
  enter-active-class="animated fadeInRight"
  leave-active-class="animated fadeOutLeft"
>
  <component
    class="view_item"
    v-bind:is="currentTabComponent"
  ></component>
</transition>

Answer 1

事实上是可以绑定的，是我学习的不够

<transition

  name="fade"
  :enter-active-class="enterClass"
  :leave-active-class="leaveClass"
>
  <component
    class="view_item"
    v-bind:is="currentTabComponent"
  ></component>
</transition>

data() {
return {     
  enterClass: "animated fadeInRight",
  leaveClass: "animated fadeOutLeft"
};

},
methods: {
animationSwitch(enter, leave) {

  this.enterClass = `animated ${enter}`;
  this.leaveClass = `animated ${leave}`;
}

}