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

37  

There are many properties that can't be transitioned. overflow is 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.

有许多属性无法转换。溢出就是其中之一;渲染引擎不知道如何在“隐藏”和“显示”之间进行转换，因为它们是二进制选项，而不是间隔。这就是为什么你不能在display：none之间转换的原因。和显示：块; （例如）：没有中间阶段用作转换。

You can see a list of properties you can animate here on Mozilla Developer Network.

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

7  

overflow isn't CSS animatable property. You can see full list of animatable CSS properties there.

溢出不是CSS动画属性。您可以在那里看到可动画CSS属性的完整列表。

7  

You can simulate a delay with 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

You'll have to apply a separate animation to .body if 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.

如果你想在removeClass上延迟，你必须将单独的动画应用于.body，并且还要注意两个动画不重叠或者它们将相互抵消。

1  

It makes sense that you can't transition between binary attributes for example overflow: hidden; and overflow: visible but it would have been really nice if instead of "transitioning" then it would be like (in js pseudo code:

有意义的是你不能在二进制属性之间转换，例如overflow：hidden;和溢出：可见，但如果不是“转换”那将是非常好的，那就像（在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中。