左右滑动 VueJs 过渡的最后润色答案

【问题标题】：Final Touches on a Slide Left and Right VueJs Transition左右滑动 VueJs 过渡的最后润色
【发布时间】：2020-01-14 06:30:06
【问题描述】：

我有一个用 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>

这是 CSS 中相关的 topic-left 和 topic-right 类：

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

.topic-left-enter,
.topic-right-leave-to {
    transform: translateX(100%);
}

.topic-right-enter,
.topic-left-leave-to {
    transform: translateX(-100%);
}

.topic-left-enter,
.topic-left-leave-to,
.topic-right-enter,
.topic-right-leave-to {
    opacity: 0;
 }

到目前为止，这给了我一个带有预期动画的向右滑动，以及一个带有不寻常动画的向左滑动，如下所示：

虽然向右滑动的动画隐藏了前一个主题并向右移动新主题，因为它在三秒内不透明度增加，但向左滑动动画将前一个主题向左移动，因为它在三秒内失去不透明度，然后等待在显示新主题之前再过三秒钟。

向左滑动动画的预期效果是向右滑动动画的近似镜像 - 前一个主题应该消失，而新主题应该随着不透明度的增加而向左滑动，如下所示：

我觉得这可能是一个简单的修复，但我在逻辑上有些挣扎，而且对 VueJS 还是很陌生，感谢这个网站提供的指导。如果此问题的任何部分需要澄清，请询问！

【问题讨论】：

标签： vue.js transition slideshow slide

【解决方案1】：

使用以下方法设法获得相同的左右效果：

    .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);
    }

无论出于何种原因，休假转换类都干扰了左右转换 - 将来可能值得研究，但目前我对这个解决方案感到满意。

【讨论】：