下拉菜单切换position时内容上移过快，如何减慢内容移动速度？

你现在的问题核心是切换position:absolute和position:relative时，元素脱离/回归文档流的操作是瞬时的，没法通过transition过渡，所以菜单收起时content会立刻上移，和菜单的transform动画不同步，看起来就像content动得更快。

不用position切换，改用max-height的过渡动画来控制菜单的展开收起，就能让content的移动和菜单动画完全同步，步骤如下：

修改核心CSS代码 #

把原来的dropdown-content相关样式替换成下面的代码：

.dropdown-content {
  position: relative; /* 始终保持在文档流中，取消position切换 */
  width: 100%;
  overflow-y: scroll;
  max-height: 0; /* 默认收起，高度设为0 */
  visibility: hidden;
  opacity: 0;
  /* 延迟visibility隐藏，等高度动画结束再隐藏元素 */
  transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

input[type="checkbox"]:checked~.dropdown-content {
  visibility: visible;
  opacity: 1;
  max-height: 200px; /* 展开时的最大高度，和原设置一致 */
  /* 展开时立刻显示元素，不同步延迟 */
  transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0s;
}

/* 保留原有的li滑入动画 */
.dropdown-content li {
  border-radius: 0.5em;
  position: relative;
  left: 100%;
  transition: 0.5s;
  transition-delay: calc(60ms * var(--delay))
}

input[type="checkbox"]:checked~.dropdown-content li {
  left: 0;
}

修改说明 #

1. 取消position切换：让dropdown-content始终处于文档流中，它的高度变化会直接推动下方的content区域，无需依赖position变化触发布局重排。
2. 用max-height控制展开收起：通过max-height从0过渡到200px实现菜单平滑展开/收起，这个过渡会自然带动content同步移动，速度完全匹配。
3. 配合visibility和opacity：避免菜单收起后仍可被点击，同时保证动画的连贯性。

这样修改后，菜单展开和收起时，content区域的移动速度就会和菜单动画完全一致，不会出现快慢脱节的问题。

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