I'm currently working on a VueJS slideshow that can toggle between different slides based on button input. The main functionality of the slideshow is solid, but I'm facing a small challenge when it comes to applying transitions to the slide components.
Here's how the transition group and its child components are set up:
<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>
Below are the corresponding topic-left and topic-right classes in the CSS:
.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;
}
Currently, I have achieved the desired animation for slide-right, but slide-left is displaying an unexpected animation behavior. Here's how they look:
https://i.stack.imgur.com/dg8g0.jpg
While slide-right hides the previous topic and transitions the new topic smoothly to the right with increasing opacity over three seconds, slide-left moves the previous topic to the left with decreasing opacity in three seconds, followed by a delay before showing the new topic in place.
The intention for the slide-left animation is to mirror the slide-right effect - the previous topic should fade out as the new topic slides in from the left with increasing opacity, like this:
https://i.stack.imgur.com/mpbNm.jpg
I believe this issue has a simple solution, but as I am still relatively new to VueJS, I find myself struggling with the logic behind it. Any assistance or clarification would be greatly appreciated. Thank you!