When the out transition finishes, the rest of the page goes up and then down again to make space for the next image. (Look at the gif I posted)

this is how I implemented the transition tag:

      <div class="xs12 md6 lg6" >
    <transition
        v-if="heroImages[iterator] != undefined"
        mode="out-in"
        enter-active-class="animate__animated animate__fadeIn"
        leave-active-class="animate__animated animate__fadeOut"
    >
      <div v-if="iterator%2 == 1" style="display: flex;">   
        <img
          class="heroImage xs10"
          style="float:right;"
          :src="baseUrl   heroImages[iterator].url"
          alt=""
        />
      </div>
      <div v-else-if="iterator%2 == 0 && iterator != 4" style="display: flex;">
        <img
          class="heroImage xs10"
          style="float:right;"
          :src="baseUrl   heroImages[iterator].url"
          alt=""
        />
      </div>
      <div v-else style="display: flex;">
        <img
          class="heroImage xs10"
          style="float:right;"
          :src="baseUrl   heroImages[iterator].url"
          alt=""
        />
      </div>
    </transition>
  </div>

Iterator changes with a js function every 2 seconds. This make the image changing.

How can I avoid this graphic "glitch" between images?

CodePudding user response：

Try to use v-show instead of v-if v-show vs. v-if and set height on your image style.