Vue.js 幻灯片左侧和右侧VueJs过渡的最后润色

我有一个用VueJS构建的幻灯片，它可以显示或隐藏不同的幻灯片，具体取决于按下的按钮（带有箭头和分页）。这张幻灯片的核心功能非常强大，但是我在将转换应用到幻灯片组件时遇到了一个小困难

以下是过渡组及其子组件：

<transition-group :name="topicDirection ? 'topic-left' : 'topic-right'">
  <component v-for="(topic, index) in topics" :is="topic.component" :key="topic.title" 
    v-show="activeTopic === index"/>
</transition-group>

到目前为止，这给了我一张幻灯片，右图显示了预期的动画，左图显示了不同寻常的动画，如下所示：

“向右滑动”动画会在三秒内隐藏上一个主题，并在不透明度增加时将新主题向右移动，而“向左滑动”动画会在三秒内失去不透明度时将上一个主题向左移动，然后再等待三秒，然后再显示已就位的新主题

“向左滑动”动画的预期效果与“向右滑动”动画的效果大致相同-前一主题应消失，新主题应随着不透明度的增加而向左滑动，如下所示：

---

我觉得这可能是一个简单的解决方案，但我在逻辑上有点纠结，而且对VueJS还是相当陌生的，非常感谢这个网站提供的指导。如果此问题的任何部分需要澄清，请询问

使用以下方法成功地获得了相同的左右效果：

    .topic-left-enter {
    opacity: 0;
    transform: translateX(100%);
    }

.topic-right-enter {
    opacity: 0;
    transform: translateX(-100%);
    }

.topic-left-enter-active,
.topic-right-enter-active {
    transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    }

不管出于什么原因，leave转换类同时干扰了右转换和左转换——也许将来值得研究，但目前我对这个解决方案感到满意

    .topic-left-enter {
    opacity: 0;
    transform: translateX(100%);
    }

.topic-right-enter {
    opacity: 0;
    transform: translateX(-100%);
    }

.topic-left-enter-active,
.topic-right-enter-active {
    transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    }