Vue.js Transitions - enter and leave, dependent on increment/decrementing value

I currently have the following transition block component:

<div
   v-if="!surveyResultIsReady"
   class="vh-md-40 position-relative"
   >
   <transition
      name="custom-classes-transition"
      enter-active-class="animated slideInRight"
      leave-active-class="animated slideOutLeft"
      >
      <div
         v-bind:key="step"
         class="w-100 position-absolute mx-auto"
         >
         <SurveyActiveQuestion
            v-if="!surveyResultIsReady"
            v-bind:question="activeQuestion()"
            v-bind:totalQuestions="totalQuestions"
            v-on:activeQuestionAnswered="activeQuestionAnswered()"
            />
      </div>
   </transition>
</div>

The transition is governed by the this.step value (v-bind:key="step").

The transition looks great when this.step++, the transition swipes in the "correct" direction: swiping in left to right. However, when this.step-- the transition is the same.

I was wondering, how would I correct this to swipe back right to left for the this.step-- direction?

You need two different CSS enter states for the transition because you want to slide in from both directions. Using a binding for enter-class (not the same as enter-active-class), you can isolate the slide positioning into 2 separate CSS enter classes and swap them based on the change in step. For example, here is the new binding:

:enter-class="enterClass"

enterClass is a data property set to either the incrementing or decrementing class name string using a watch on step:

watch: {
  step(old, value) {
	this.enterClass = value > old ? 'slide-in-right' : 'slide-in-left'; 
  }
}

And here are the classes:

.animated {
  transition: transform .5s;
}
.slide-in-left {
  transform: translate(-100%, 0);
}
.slide-in-right {
  transform: translate(100%, 0);
}

DEMO
Putting it all together, here is a simplified version of your code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

new Vue({
  el: "#app",
  data() {
    return {
      step: 1,
      enterClass: ''
    }
  },
  watch: {
    step(value, old) {
      this.enterClass = value > old ? 'slide-in-left' : 'slide-in-right'; 
    }
  }
});

<!-- language: lang-css -->

[v-cloak] {
  display:none;
}

#app {
  background: #fff;
  border-radius: 4px;
}

.slider {
  position: relative;
  overflow-x: hidden;
  border: 1px solid #cccccc;
  border-radius: 3px;
  height: 40px;
  margin-bottom: 4px;
}

.slider > div {
  position: absolute;
  width: 100%;
  text-align: center;
}

.animated {
  transition: transform .5s;
}
.slide-in-left {
  transform: translate(-100%, 0);
}
.slide-in-right {
  transform: translate(100%, 0);
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <div class="slider">
    <transition name="slide"
      enter-active-class="animated"
      :enter-class="enterClass"
    >
      <div :key="step">
        Content <br />
        {{ step }}
      </div>
    </transition>
  </div>
  <button @click="--step">-</button>
  <button @click="++step">+</button>
</div>

<!-- end snippet -->

You can add leave-class in the same way if you want to make it fancier

You can use GSAP. I saw it in the video (link with timing) https://youtu.be/14yOawLavB0?t=734
there is example of code (you can ease use it with your steps) and result.