out 转换完成时防止页面上升

Question

当输出转换完成后，页面的其余部分会上升然后再次下降，为下一张图像制作 space。 （看我贴的动图）

这就是我实现转换标签的方式：

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

迭代器每2秒更换一次js函数。这使图像发生变化。

如何避免图像之间的这种图形“故障”？

Answer 1

尝试使用 v-show 而不是 v-if v-show vs. v-if 并设置图像样式的高度。