Modifying a leave transition in Vue.js dynamically following the completion of an enter transition

Question

Modifying a leave transition in Vue.js dynamically following the completion of an enter transition

I am dealing with a dynamic transition for a slider element that moves left or right. Vue only allows me to have one transition, so I am using a dynamic transition property like this:

<transition v-bind:name="'slider-' + slideDirection">

This slider has enter and leave transitions that adjust based on the direction it's appearing or leaving to. Everything seems fine, but...

When the element meets the conditions to appear, the enter and enter-to transitions work correctly every time. However, the leave and leave-to transitions do not update if the direction is changed after the element has appeared.

You can see an example of this behavior in this fiddle: https://jsfiddle.net/nxLmdk9q/4/

Everything works in the example, except when you change directions, the element retains the previous direction animation for leave-to.

How can I resolve this issue?

javascript css vue.js

Answer 1

Answer №1

It appears that the slide transition is starting before the slideDirection variable is updated. Consider using the nextTick function to ensure that the slide transition waits for the direction to be updated.

Here's an updated example:

new Vue({
  el: "#app",
  data: {
    slideDirection: "right",
    counter: 0
  },
  methods: {
    moveRight: function() {
      this.slideDirection = "right";
      this.$nextTick(() => {
        this.counter++;
      })

    },
    moveLeft: function() {
      this.slideDirection = "left";
      this.$nextTick(() => {
        this.counter--;
      })
    },
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 150px;
}

div#slider {
  position: relative;
}

div#slider div:nth-child(even) {
  background: green;
}

div#slider div:nth-child(odd) {
  background: red;
}

div {
  padding: 30px;
  width: 100%;
  height: 100%;
  position: absolute;
}

div:odd {
  background: blue;
}

.slider-right-enter {
  opacity: 0;
  transform: translatex(100%);
}

.slider-right-enter-to {
  opacity: 1;
  transition: all 0.5s ease-out;
}

.slider-right-leave-to {
  opacity: 0;
  transform: translatex(-100%);
  transition: all 0.5s ease-out;
}

.slider-left-enter {
  opacity: 0;
  transform: translatex(-100%);
}

.slider-left-enter-to {
  opacity: 1;
  transition: all 0.5s ease-out;
}

.slider-left-leave-to {
  opacity: 0;
  transform: translatex(100%);
  transition: all 0.5s ease-out;
}

<div id="app">

  <div id="slider">
    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 0'>
        0
      </div>
    </transition>

    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 1'>
        1
      </div>
    </transition>

    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 2'>
        2
      </div>
    </transition>

    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 3'>
        3
      </div>
    </transition>

  </div>

  <div>

    <button @click="moveLeft">
          &#x3C;&#x3C;
        </button>
    <button @click="moveRight"> 
          &#x3E;&#x3E;
        </button>
  </div>
</div>

Answer 2

It appears that the slide transition is starting before the slideDirection variable is updated. Consider using the nextTick function to ensure that the slide transition waits for the direction to be updated.

Here's an updated example:

new Vue({
  el: "#app",
  data: {
    slideDirection: "right",
    counter: 0
  },
  methods: {
    moveRight: function() {
      this.slideDirection = "right";
      this.$nextTick(() => {
        this.counter++;
      })

    },
    moveLeft: function() {
      this.slideDirection = "left";
      this.$nextTick(() => {
        this.counter--;
      })
    },
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 150px;
}

div#slider {
  position: relative;
}

div#slider div:nth-child(even) {
  background: green;
}

div#slider div:nth-child(odd) {
  background: red;
}

div {
  padding: 30px;
  width: 100%;
  height: 100%;
  position: absolute;
}

div:odd {
  background: blue;
}

.slider-right-enter {
  opacity: 0;
  transform: translatex(100%);
}

.slider-right-enter-to {
  opacity: 1;
  transition: all 0.5s ease-out;
}

.slider-right-leave-to {
  opacity: 0;
  transform: translatex(-100%);
  transition: all 0.5s ease-out;
}

.slider-left-enter {
  opacity: 0;
  transform: translatex(-100%);
}

.slider-left-enter-to {
  opacity: 1;
  transition: all 0.5s ease-out;
}

.slider-left-leave-to {
  opacity: 0;
  transform: translatex(100%);
  transition: all 0.5s ease-out;
}

<div id="app">

  <div id="slider">
    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 0'>
        0
      </div>
    </transition>

    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 1'>
        1
      </div>
    </transition>

    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 2'>
        2
      </div>
    </transition>

    <transition v-bind:name="'slider-' + slideDirection">
      <div v-if='counter == 3'>
        3
      </div>
    </transition>

  </div>

  <div>

    <button @click="moveLeft">
          &#x3C;&#x3C;
        </button>
    <button @click="moveRight"> 
          &#x3E;&#x3E;
        </button>
  </div>
</div>

Modifying a leave transition in Vue.js dynamically following the completion of an enter transition

Answer №1

Similar questions

Attempting to utilize JavaScript in order to reset a text input field

Connecting a Date object by using :value and @input within a VueJS component

Unable to invoke any fineUploader functions within a callback function

Is there a way to send a promise resolve or reject from a function code within router.post() in Express?

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

How can I make TypeScript properly export function names for closure-compiler?

Creating a dynamic dropdown menu to display nested arrays in Vuejs

Utilizing Vue: Triggering Functions in Sibling/Child Components with Event Handlers

Is it possible to change the CSS of a parent element using a child element?

Implementation of Exporting to Excel

Prevent form submission without JavaScript

The little DIV strayed beyond the boundaries of its parent DIV

Automatic closure of Info Window on Google Maps is not functioning as expected

Issue with div element not functioning properly within table declaration on Internet Explorer

Looking for a simple method to link JSON data to an svg element through Javascript?

What is the best way to send an array of grouped data to a table

The navigation bar alignment to the right is malfunctioning

Illustrating SVG links

What are your thoughts on the combination of Vue.js and Codenvy

When I click away from the screen, the bottom border of the button disappears