CSS多属性过渡异常：display属性未按设置延迟切换如何修复？

这个问题的核心原因其实很简单——display 属性是无法被 CSS transition 过渡的，它属于离散型属性（只有开/关两种状态，没有中间值），浏览器不会对它的变化应用过渡动画。而且你当前的 JS 写法直接同时修改了 margin-top 和 display:none，浏览器会优先处理 display:none，直接让元素脱离文档流，导致 margin-top 的过渡动画根本没机会执行，更别说你设置的5秒延迟了。

下面给你两种可行的修复方案，优先推荐第一种（更优雅且符合 CSS 动画最佳实践）：

方案一：用 opacity + visibility 模拟隐藏效果（推荐） #

我们可以用 opacity（控制透明度）和 visibility（控制元素是否可见但保留布局占位）来替代 display，这两个属性都支持过渡动画，能完美实现你要的延迟效果：

调整后的 CSS #

#container {
  display: block;
  margin-top: 0vh;
  opacity: 1; /* 默认完全不透明 */
  visibility: visible; /* 默认可见 */
  /* 定义过渡：margin-top 延迟0.1s开始，时长1s；opacity 延迟5s开始，时长0.1s；visibility 延迟5.1s（等opacity完全透明后再隐藏占位） */
  transition: 
    margin-top 1s ease-in 0.1s,
    opacity 0.1s linear 5s,
    visibility 0s linear 5.1s;
}

/* 新增隐藏状态的类 */
#container.hidden {
  margin-top: 50vh;
  opacity: 0; /* 完全透明 */
  visibility: hidden; /* 不可见（但仍占布局空间） */
}

调整后的 JS #

不再直接操作样式，而是通过添加/移除类来控制状态，这样能让 CSS 过渡逻辑更清晰：

$("img#img1").on('click', function () {
  $("#container").addClass('hidden');
});

$("img#img2").on('click', function () {
  $("#container").removeClass('hidden');
});

这样执行后，点击 img1 会先触发 margin-top 延迟0.1s开始过渡到50vh（时长1s），5秒后开始将透明度降到0（时长0.1s），最后在5.1s时隐藏元素的占位，完全符合你的预期。

方案二：如果必须使用 display:none（释放布局空间） #

如果你确实需要让元素完全脱离文档流（不占空间），可以用 setTimeout 手动延迟设置 display:none，等所有过渡动画完成后再执行：

调整后的 JS #

$("img#img1").on('click', function () {
  const container = $("#container");
  // 先触发margin-top的过渡
  container.css('margin-top', '50vh');
  // 计算总延迟：margin过渡时长(1s) + 延迟(0.1s) + opacity过渡延迟(5s) + opacity过渡时长(0.1s) = 6.2s
  setTimeout(() => {
    container.css('display', 'none');
  }, 6200);
});

$("img#img2").on('click', function () {
  const container = $("#container");
  // 先恢复display，再触发margin-top的过渡
  container.css('display', 'block');
  // 用requestAnimationFrame确保浏览器渲染display:block后再执行样式修改，避免过渡不触发
  requestAnimationFrame(() => {
    container.css('margin-top', '0vh');
  });
});

这种方法需要手动计算延迟时间，不如方案一优雅，而且显示时会有布局跳变的问题，所以优先推荐方案一。

内容的提问来源于stack exchange，提问作者Przemysław Niemiec