当单击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转换的特定样式属性?
发布于 2015-01-12 23:08:46
有许多属性是不能转换的。overflow
就是其中之一;渲染引擎不知道如何在“隐藏”和“显示”之间转换,因为它们是二元选项,而不是间隔。这就是为什么不能在display: none;
和display: block;
之间转换的原因(例如):没有中间阶段可以用作转换。
你可以在Mozilla Developer Network上看到一个属性列表,你可以对进行动画处理。
发布于 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
应用一个单独的动画,还要注意两个动画不要重叠,否则它们会相互抵消。
发布于 2015-01-12 23:09:28
CSS overflow不是动画属性。你可以看到动画CSS属性there的完整列表。
https://stackoverflow.com/questions/27904886
复制相似问题