title: Final Touches on a Slide Left and Right VueJs Transition
body: <p>I have a slideshow built with VueJS, which can display or hide different slides depending on what buttons are pressed (with arrows and pagination). The core functionality of this slideshow is robust, but I am having a minor difficulty with applying transitions to the slide components.</p>
  
  <p>Here's the transition group and its child components: </p>
  
  <pre><code>&lt;transition-group :name="topicDirection ? 'topic-left' : 'topic-right'"&gt;
    &lt;component v-for="(topic, index) in topics" :is="topic.component" :key="topic.title" 
      v-show="activeTopic === index"/&gt;
  &lt;/transition-group&gt;
  </code></pre>
  
  <p>And here's the associated topic-left and topic-right classes in CSS:</p>
  
  <pre><code>.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;
   }
  </code></pre>
  
  <p>What this is giving me so far is a slide-right with the intended animation, and a slide-left with unusual animation, like so:</p>
  
  <p><a href="https://i.stack.imgur.com/dg8g0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dg8g0.jpg" alt="enter image description here"></a></p>
  
  <p>Whilst the slide-right animation hides the previous topic and moves the new topic right as it increases in opacity within three seconds, the slide-left animation moves the previous topic to the left as it loses opacity in three seconds, then waits another three seconds before showing the new topic already in place.</p>
  
  <p>The intended effect for the slide-left animation is an approximate mirror of that of slide-right - the previous topic should disappear and the new topic should slide left as it increases in opacity, like so:</p>
  
  <p><a href="https://i.stack.imgur.com/mpbNm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mpbNm.jpg" alt="enter image description here"></a></p>
  
  <p>I feel like this is likely a simple fix, but I am struggling with the logic somewhat and am still quite new to VueJS, and appreciate the guidance this site offers. If any part of this question needs clarification then please ask! </p>