我可以将 CSS 过渡应用于溢出属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27904886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I apply a CSS transition to the overflow property?
提问by Nikunj Madhogaria
I'm trying to set a transition-delayto the overflowproperty of bodywhen a divis clicked by adding a class to the bodyas follows:
我试图通过向 a 添加一个类来将a 设置为单击atransition-delay时的overflow属性，如下所示：bodydivbody
$("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>However, this doesn't seem to work (there's no delay). Am I doing anything wrong here?
但是，这似乎不起作用（没有延迟）。我在这里做错了什么吗？
I know this can be achieved by using setTimeoutfunction, but was wondering why can't this be achieved using css transitions? Are there any specific style properties to which css transitions can be applied?
我知道这可以通过使用setTimeout函数来实现，但想知道为什么不能使用 css 转换来实现？是否有任何特定的样式属性可以应用 css 转换？
回答by TylerH
There are many properties that can't be transitioned. overflowis among them; the render engine has no idea how to transition between "hidden" and "shown", because those are binary options, not intervals. This is the same reason why you can't transition between display: none;and display: block;(for example): there are no in-between phases to use as transitions.
有许多属性无法转换。overflow在其中；渲染引擎不知道如何在“隐藏”和“显示”之间转换，因为它们是二元选项，而不是间隔。这与您不能在display: none;和display: block;（例如）之间转换的原因相同：没有中间阶段可用作转换。
You can see a list of properties you can animate hereon Mozilla Developer Network.
您可以在 Mozilla 开发人员网络上查看可以在此处设置动画的属性列表。
回答by Dmitry
You can simulate a delay with animation:
您可以使用以下方法模拟延迟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>You'll have to apply a separate animation to .bodyif you want a delay on removeClass, and also to take care that the two animations don't overlap or they'll cancel each other out.
.body如果您希望在 removeClass 上延迟，则必须应用单独的动画，并且还要注意两个动画不要重叠，否则它们会相互抵消。
回答by Evgeny Samsonov
回答by OZZIE
It makes sense that you can't transition between binary attributes for example overflow: hidden;and overflow: visiblebut it would have been really nice if instead of "transitioning" then it would be like (in js pseudo code:
这是有道理的，比如，你可以二进制属性之间没有过渡overflow: hidden;和overflow: visible，但它会一直非常好的，如果不是“过渡”，那么它会像（JS中的伪代码：
setTimeout("applyOverflowVisible()", transitionTime);
But of course you can do this yourself in JavaScript but then you are splitting the code between places and it can make it difficult to understand by someone else. I guess using things like React helps but even there I would want to avoid mixing css into the js.
但是当然你可以在 JavaScript 中自己做这件事，但是你在不同的地方分割代码，这可能会让其他人难以理解。我想使用 React 之类的东西会有所帮助，但即使在那里我也想避免将 css 混合到 js 中。
回答by Moshe Jonathan Gordon Radian
In case someone is looking at the answer, like I was, for a way to animate the cropping of an element which requires overflowing - here is the solution that worked for me: the clip-path css propertywhich is animatable and very versatile.
如果有人像我一样正在查看答案，以寻求一种对需要溢出的元素的裁剪进行动画处理的方法 - 这是对我有用的解决方案：clip-path css 属性，它是可动画且用途广泛的。
Here is a cool tool to play around with it to get the proper start / end values: https://bennettfeely.com/clippy/.
这是一个很酷的工具，可以使用它来获得正确的开始/结束值：https: //bennettfeely.com/clippy/。
