Transitioning in Vue.js can be triggered by changing a value up or down

Question

Transitioning in Vue.js can be triggered by changing a value up or down

My current transition block component is set up like this:

<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 this.step value (v-bind:key="step") controls the transition.

So far, the transition works well when this.step++, swiping from left to right. However, when this.step--, the transition remains the same direction.

I am looking for a way to make the transition swipe back from right to left when using this.step--. How can I achieve this?

javascript css vue.js vuejs2 vue-transitions

Answer 1

Answer №1

To achieve the desired sliding effect from both directions in CSS transitions, it is necessary to have two different enter states specified. By utilizing a binding for enter-class (distinct from enter-active-class), you can segregate the slide positioning into two separate CSS classes and switch between them based on the change in step. Below is an example of how this new binding can be implemented:

:enter-class="enterClass"

The enterClass is a data property that can take on either the incrementing or decrementing class name string by setting up a watch on the step variable:

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

Here are the respective CSS classes used for the sliding animation:

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

DEMO Combining these elements, a simplified version of the code implementation would look like this:

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

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

<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>

If desired, you can also include leave-class using a similar approach to further enhance the animation effects.

Answer 2

To achieve the desired sliding effect from both directions in CSS transitions, it is necessary to have two different enter states specified. By utilizing a binding for enter-class (distinct from enter-active-class), you can segregate the slide positioning into two separate CSS classes and switch between them based on the change in step. Below is an example of how this new binding can be implemented:

:enter-class="enterClass"

The enterClass is a data property that can take on either the incrementing or decrementing class name string by setting up a watch on the step variable:

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

Here are the respective CSS classes used for the sliding animation:

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

DEMO Combining these elements, a simplified version of the code implementation would look like this:

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

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

<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>

If desired, you can also include leave-class using a similar approach to further enhance the animation effects.

Answer 3

Answer №2

A great tool to utilize for animations is GSAP. I recently came across a tutorial demonstrating its capabilities (link provided with timestamp) https://youtu.be/14yOawLavB0?t=734. The video showcases sample code (which you can easily incorporate into your project) along with the corresponding outcome.

Answer 4

A great tool to utilize for animations is GSAP. I recently came across a tutorial demonstrating its capabilities (link provided with timestamp) https://youtu.be/14yOawLavB0?t=734. The video showcases sample code (which you can easily incorporate into your project) along with the corresponding outcome.

Transitioning in Vue.js can be triggered by changing a value up or down

Answer №1

Answer №2

Similar questions

Why is my custom Vuelidate validator not receiving the value from the component where it is being called?

Exploring the Power of an Enumerator in JavaScript

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

Discovering the art of incorporating various color palettes within a single stylesheet using HTML

Utilizing Stored Variables and Random Numbers in Selenium IDE

Managing uncaught exceptions in node.js

Jest tests are failing because React is not defined

Utilizing AngularJS to include information into JSON-LD

What is the best way to insert hyperlinks within every cell of a table using Angular?

Is there a way to position my character at the exact center of my mouse click coordinates instead of the top left corner?

Encountered an issue with reading the property 'drop' from an undefined source during a straightforward migration

Tips for transferring information from the Data function to AsyncData in Nuxt

Customize your Shopify Messenger icon using JavaScript!

"Encountering difficulty in retrieving information from $q and integrating it into the

Tips for retrieving return values from AJAX URL content

The call stack in mongodb has surpassed its maximum size limit

Issues with Rails comments not displaying properly when using ajax requests

Why isn't the externally loaded JS file executing properly?

Interactions of selecting dates in datepicker widget