div高度不同时transition过渡速度不一致如何解决

方案1：JS动态统一容器高度（你提到的方案验证可行） #

该方案完全可以实现，即使在Webflow环境下也可以通过插入自定义代码完成：

1. 给所有段落外层容器设置同一个类名，比如paragraph-container
2. 在Webflow页面设置的「自定义代码」板块，将以下代码插入到「Body 结束标签前」位置即可：

document.addEventListener('DOMContentLoaded', () => {
  // 替换为你实际使用的容器类名
  const containers = document.querySelectorAll('.paragraph-container');
  let maxHeight = 0;
  // 计算所有容器的最大高度
  containers.forEach(el => {
    const originHeight = el.style.height;
    el.style.height = 'auto';
    maxHeight = Math.max(maxHeight, el.offsetHeight);
    el.style.height = originHeight;
  });
  // 给所有容器统一设置最大高度
  containers.forEach(el => {
    el.style.height = `${maxHeight}px`;
  });
});

设置后所有容器的高度变化范围一致，相同过渡时长下速度完全相同。

方案2：纯CSS固定最大高度（Webflow无代码实现） #

如果不想写JS，可以直接在Webflow样式面板手动配置：

1. 先确定你最长段落的完整高度
2. 给所有段落外层容器设置height为上述最大高度值，同时设置overflow: hidden
3. 所有容器使用相同的过渡时长即可
   该方案不需要任何代码，缺点是如果后续新增更长的段落，需要手动调整最大高度值。

方案3：按容器高度单独设置过渡时长（无需统一高度） #

如果不想所有容器都用相同高度，可以通过单独设置每个容器的过渡时长实现速度统一：
速度公式为：过渡时长 = 容器高度 / 预期固定速度
比如你预期动画速度为每秒移动200px，高度200px的容器过渡时长设为1s，高度400px的容器设为2s，即可保证两者过渡速度完全一致。该方案在Webflow里直接给每个容器单独配置过渡参数即可，不需要额外代码。

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