如何解决Vue transition离场动画结束后页面上下跳动的问题

你遇到的跳动问题是out-in过渡模式的默认特性导致的：旧元素离场动画结束后会被立即从DOM移除，此时父容器没有内容支撑会出现高度塌陷，等新元素完成插入渲染后父容器高度才会恢复，就出现了页面内容先上移再回落的问题。你可以按照以下步骤修复：

• 给transition外层的父容器提前预留高度，避免高度塌陷。你可以给外层class="xs12 md6 lg6"的div添加固定高度或者最小高度，数值匹配你实际渲染的图片高度即可。如果是响应式场景更推荐用aspect-ratio属性固定宽高比，比如添加样式aspect-ratio: 16/9; position: relative;，不管子元素是否存在，容器都会保持固定的宽高比例，不会出现塌陷。
• 调整transition组件的v-if判断位置，你现在把v-if写在transition标签上，会导致transition组件本身被频繁销毁重建，影响过渡逻辑的稳定性，建议把这个判断移动到transition内部的子元素上。
• 你当前写的三个v-if分支的div结构完全重复，只需要保留一个div即可，动态绑定src属性，冗余代码删除后逻辑更清晰，也能降低异常概率。
• 如果以上调整后还有问题，可以把过渡模式从out-in改为默认的同时过渡，给transition内部的图片容器加绝对定位，让新旧图片重叠在同一位置，旧图淡出的同时新图淡入，整个过程父容器高度始终保持正常，完全不会出现跳动问题。

优化后的参考代码如下：

<div class="xs12 md6 lg6" style="min-height: 400px; position: relative;">
  <transition
    mode="out-in"
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div key="image-container" v-if="heroImages[iterator] != undefined" style="display: flex; width: 100%;">   
      <img
        class="heroImage xs10"
        style="float:right;"
        :src="baseUrl + heroImages[iterator].url"
        alt=""
      />
    </div>
  </transition>
</div>

内容的提问来源于stack exchange，提问作者Gabriele Cinà