我想通过给 body 添加类名的方式，为 div 点击时的 overflow 属性设置 transition-delay，实现过渡效果，代码如下：
$("div").click(function(){
$("body").addClass("no_overflow");
});div{
background:lime;
height:2000px;
}
.no_overflow{
overflow:hidden;
}
body{
overflow:auto;
transition: overflow 0 2s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>有许多属性无法进行过渡。其中overflow就是其中之一；渲染引擎不知道如何在“隐藏”和“显示”之间进行过渡，因为这些是二进制选项，而不是区间。这也是为什么您不能在display: none;和display: block;（例如）之间进行过渡的原因：没有中间阶段可用作过渡。
你可以在Mozilla开发者网络这里看到可以进行动画处理的属性列表。
visibility，因为你只能使用visible、hidden和collapse，意味着没有中间状态，但它仍然遵循动画步骤；这对于动画子菜单非常有效。 - Smitheevisibility 属性是唯一例外的意思。有多个（n > 1）属性可以过渡，也有多个（n > 1）不能过渡。 - TylerH您可以使用 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; }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>如果您想对 .body 应用延迟删除类的动画效果，您将需要应用单独的动画。同时还要注意两个动画不重叠，否则它们会相互抵消。
作为一种纯CSS解决方案，Dmitry的回答应该是唯一被采纳的答案，它可以对“不可动画化”的属性应用延迟。但值得一提的是，应用动画的CSS规则应该在每次需要时都能被“触发”。
例如，以下代码将不起作用：
@keyframes show-overflow {
from { overflow: hidden; }
}
.hideable, .overlay {
font-size: 36px;
height: 50px;
}
.hideable {
transition: height 2s;
overflow: visible;
animation: show-overflow 2s; /* this line should be in separate "triggerable" CSS rule to work */
}
.hideable.hidden {
height: 0;
overflow: hidden;
}<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
This is the text to hide and show.
</div>
<div class='overlay'>
This is overlaying text
</div>但是将标记属性移到单独的CSS规则后，一切都按预期工作：
@keyframes show-overflow {
from { overflow: hidden; }
}
.hideable, .overlay {
font-size: 36px;
height: 50px;
}
.hideable {
transition: height 2s;
overflow: visible;
}
.hideable:not(.hidden) {
animation: show-overflow 2s; /* now this works! */
}
.hideable.hidden {
height: 0;
overflow: hidden;
}<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
This is the text to hide and show.
</div>
<div class='overlay'>
This is overlaying text
</div>在二进制属性之间，例如overflow: hidden;和overflow: visible，无法进行过渡是有道理的，但如果不是“过渡”，而是像以下js伪代码一样就好了：
setTimeout("applyOverflowVisible()", transitionTime);
height属性而不是overflow属性，以达到大致相同的外观。 - TylerHoverflow为hidden时，它不会以相同的方式裁剪窗口。无论如何，我最终使用了setTimeout。;) - Nikunj Madhogaria