使用Vue Transitions时，如何避免可变高度元素导致scrollHeight变化？

针对你遇到的可变高度元素在Vue过渡时引发scrollHeight变化、页面跳转的问题，有几个实用方案可以保留Vue Transitions的同时解决这个问题：

方案1：用max-height实现平滑高度过渡 #

避免直接从display: none切换到显示（这会瞬间改变文档高度），改用max-height配合overflow来实现高度的平滑过渡，同时结合opacity做淡入效果：

<template>
  <Transition name="fade-height">
    <div v-if="isVisible" class="content">
      <!-- 可变高度内容，比如段落、动态文本 -->
      {{ variableContent }}
    </div>
  </Transition>
</template>

<style>
.fade-height-enter-from {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.fade-height-enter-active {
  transition: max-height 0.6s ease, opacity 0.6s ease;
}
.fade-height-enter-to {
  max-height: 2000px; /* 设置一个足够覆盖内容最大高度的值 */
  opacity: 1;
}
/* 如果需要离开过渡，同理设置离开的动画 */
.fade-height-leave-from {
  max-height: 2000px;
  opacity: 1;
  overflow: hidden;
}
.fade-height-leave-active {
  transition: max-height 0.6s ease, opacity 0.6s ease;
}
.fade-height-leave-to {
  max-height: 0;
  opacity: 0;
}
</style>

这种方式下，元素高度是逐步展开的，文档scrollHeight会平滑变化，不会出现突然跳转。

方案2：预计算元素真实高度并预留空间 #

在元素进入视图前，先渲染它但保持隐藏，计算其真实高度后，给占位容器设置这个高度，再触发过渡显示元素：

<template>
  <div ref="placeholder" class="placeholder">
    <Transition name="fade">
      <div v-if="isVisible" ref="content" class="content">
        {{ variableContent }}
      </div>
    </Transition>
    <!-- 预渲染隐藏的内容用于计算高度 -->
    <div ref="hiddenContent" class="hidden-content">
      {{ variableContent }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const isVisible = ref(false);
const variableContent = ref('这里是很长的可变高度文本...');
const hiddenContent = ref(null);
const placeholder = ref(null);

// 计算并设置占位高度
const setPlaceholderHeight = () => {
  if (hiddenContent.value) {
    const height = hiddenContent.value.offsetHeight;
    placeholder.value.style.minHeight = `${height}px`;
  }
};

onMounted(() => {
  setPlaceholderHeight();
  // 如果内容是动态变化的，监听内容变化重新计算高度
  watch(variableContent, setPlaceholderHeight);
});

// 当元素需要进入视图时，设置isVisible为true
const triggerEnter = () => {
  isVisible.value = true;
};
</script>

<style>
.hidden-content {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: 100%; /* 确保和显示的内容宽度一致 */
}
.placeholder {
  position: relative;
}
.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.5s ease;
}
.fade-enter-to {
  opacity: 1;
}
</style>

通过预计算高度，占位容器提前占据了元素的真实高度，过渡时只是改变透明度，不会影响文档总高度。

方案3：过渡前后锁定滚动位置 #

如果前两种方案不适用，可以在过渡开始前记录当前滚动位置，过渡完成后根据元素高度变化调整滚动位置，避免跳转：

<template>
  <Transition 
    name="fade"
    @before-enter="saveScrollPosition"
    @after-enter="restoreScrollPosition"
  >
    <div v-if="isVisible" ref="content" class="content">
      {{ variableContent }}
    </div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);
const variableContent = ref('可变高度内容...');
const content = ref(null);
let savedScrollTop = 0;
let contentHeightBefore = 0;

const saveScrollPosition = () => {
  savedScrollTop = window.scrollY;
  // 如果元素之前是隐藏的，高度为0，这里可以记录占位的高度
  contentHeightBefore = content.value?.offsetHeight || 0;
};

const restoreScrollPosition = () => {
  const contentHeightAfter = content.value.offsetHeight;
  const heightDiff = contentHeightAfter - contentHeightBefore;
  // 调整滚动位置，抵消高度变化带来的影响
  window.scrollTo(0, savedScrollTop + heightDiff);
};
</script>

<style>
.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.5s ease;
}
.fade-enter-to {
  opacity: 1;
}
</style>

这种方式适合高度变化不可预测的场景，通过主动调整滚动位置来避免页面跳转。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov