Vue.js中动态组件的平滑高度过渡实现问题

嗨，这个问题我之前做Vue项目时也碰到过！对话框切换内容时的高度跳变确实很破坏用户体验，咱们可以从几个实用的方向来实现平滑的高度过渡：

这个方法能完美适配不同内容的实际高度，核心是通过Vue的过渡生命周期钩子，在组件切换前后计算容器的高度，再触发CSS过渡。

步骤1：给对话框容器和内容区添加ref #

<template>
  <div class="dialog-container" ref="dialogContainer">
    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-if="activeComponent === 'single'" ref="dialogContent" class="dialog-content">
        单行内容示例
      </div>
      <div v-else ref="dialogContent" class="dialog-content">
        多行内容示例<br>
        第二行内容<br>
        第三行内容
      </div>
    </transition>
    <button @click="toggleComponent">切换内容</button>
  </div>
</template>

步骤2：编写过渡钩子方法 #

<script>
export default {
  data() {
    return {
      activeComponent: 'single',
      currentHeight: 0,
      targetHeight: 0
    }
  },
  methods: {
    handleBeforeEnter(el) {
      const container = this.$refs.dialogContainer;
      // 记录容器当前的高度
      this.currentHeight = container.offsetHeight;
      // 先固定容器高度，防止跳变
      container.style.height = `${this.currentHeight}px`;
      
      // 临时显示新内容，计算它的高度
      el.style.display = 'block';
      this.targetHeight = el.offsetHeight;
      el.style.display = '';
    },
    handleEnter(el, done) {
      const container = this.$refs.dialogContainer;
      // 触发浏览器重绘，确保过渡动画能生效
      void container.offsetWidth;
      // 切换到目标高度
      container.style.height = `${this.targetHeight}px`;
      // 过渡完成后调用done，结束过渡流程
      setTimeout(done, 1000); // 和你的淡入淡出过渡时间保持一致
    },
    handleAfterEnter() {
      const container = this.$refs.dialogContainer;
      // 移除固定高度，让容器自适应未来的内容变化
      container.style.height = 'auto';
    },
    toggleComponent() {
      this.activeComponent = this.activeComponent === 'single' ? 'multi' : 'single';
    }
  }
}
</script>

步骤3：添加CSS过渡样式 #

.dialog-container {
  transition: height 1s ease, opacity 1s ease;
  overflow: hidden; /* 必须设置，否则内容会溢出 */
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  width: 300px;
}

/* 你的淡入淡出过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.dialog-content {
  width: 100%;
}

如果你的对话框内容高度有明确的上限，这个方法不用写JS，只靠CSS就能实现：

.dialog-content {
  transition: max-height 1s ease, opacity 1s ease;
  max-height: 28px; /* 单行内容的高度，根据你的字体/ padding调整 */
  overflow: hidden;
}

/* 切换到多行内容时添加这个类 */
.dialog-content.multi-line {
  max-height: 120px; /* 设置足够容纳多行内容的最大高度 */
}

切换组件时，给内容区动态添加/移除multi-line类即可。缺点是如果内容高度超过你设置的max-height，会出现滚动条，但胜在实现简单，适合快速迭代的场景。

• 必须给容器设置overflow: hidden，否则内容会在过渡过程中溢出，看不到平滑效果。
• 高度过渡的时间要和淡入淡出的时间保持一致，确保两个动画同步，视觉体验更和谐。
• 方案一中的void container.offsetWidth是触发浏览器重绘的小技巧，能避免CSS过渡不生效的问题。

内容的提问来源于stack exchange，提问作者user7663281