Prevent page from going up when out transition finishes

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?