是否可以将CSS过渡应用于overflow属性？
是否可以将CSS过渡应用于overflow属性？
提问于 2015-01-12 23:00:25
当单击transition-delay时，我尝试通过向body添加一个类来设置body的overflow属性的div，如下所示：
$("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>
然而，这似乎不起作用(没有延迟)。我做错什么了吗？
我知道这可以通过使用setTimeout函数来实现，但我想知道为什么不能使用css转换来实现这一点？是否有可以应用css转换的特定样式属性？
回答 6
Stack Overflow用户
回答已采纳
发布于 2015-01-12 23:08:46
有许多属性是不能转换的。overflow就是其中之一；渲染引擎不知道如何在“隐藏”和“显示”之间转换，因为它们是二元选项，而不是间隔。这就是为什么不能在display: none;和display: block;之间转换的原因(例如)：没有中间阶段可以用作转换。
你可以在Mozilla Developer Network上看到一个属性列表，你可以对进行动画处理。
Stack Overflow用户
发布于 2016-12-19 19:25:54
您可以使用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>
如果你想在removeClass上延迟，你必须对.body应用一个单独的动画，还要注意两个动画不要重叠，否则它们会相互抵消。
Stack Overflow用户
发布于 2015-01-12 23:09:28
CSS overflow不是动画属性。你可以看到动画CSS属性there的完整列表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27904886
复制相关文章
相似问题
腾讯云开发者
