我可以将CSS转换应用于overflow属性吗？

但是,这似乎不起作用(没有延迟).我在这里做错了吗？

我知道这可以通过使用setTimeout函数来实现,但是想知道为什么不能使用css转换实现这一点？是否有可以应用css过渡的特定样式属性？

有许多属性无法转换.overflow就是其中之一; 渲染引擎不知道如何在"隐藏"和"显示"之间进行转换,因为它们是二进制选项,而不是间隔.这就是为什么你不能在display: none;和之间转换的原因display: block;(例如):没有中间阶段用作转换.

您可以在Mozilla Developer Network上看到可以在此处设置动画的属性列表.

您可以使用以下方法模拟延迟animation:

$("div").click(function() {
  $("body").addClass("no_overflow");
});

div {
  background: lime;
  height: 2000px;
}

.no_overflow {
  overflow: hidden;
  /* persist overflow value from animation */
  animation: 7s delay-overflow;
}

body {
  overflow: auto;
}

@keyframes delay-overflow {
  from { overflow: auto; }
}

I'm div