Question

我想通过向transition-delay添加一个类来点击overflow时，将body设置为div的{{1}}属性如下：

body

$("div").click(function(){
    $("body").addClass("no_overflow");
});

div{
  background:lime;
  height:2000px;
}
.no_overflow{  
 overflow:hidden;
}
body{  
  overflow:auto;
  transition: overflow 0 2s;  
}

然而，这似乎不起作用（没有延迟）。我在这里做错了吗？

我知道这可以通过使用 setTimeout 函数来实现，但是想知道为什么不能使用css转换实现这一点？是否有可以应用css转换的特定样式属性？

Answer 1

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

您可以在Mozilla开发者网络上看到可以为 here 设置动画的属性列表。

Answer 2

您可以使用_模拟延迟：

animation

$("div").click(function() {
  $("body").addClass("no_overflow");
});

如果你想在removeClass上延迟，你必须对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; } }应用单独的动画，并且还要注意两个动画不重叠或者它们会相互抵消。

Answer 3

溢出不是CSS动画属性。您可以看到可设置动画的CSS属性there的完整列表。

Answer 4

有意义的是你不能在二进制属性之间进行转换，例如overflow: hidden;和overflow: visible，但是如果不是“转换”那么它会非常好（就像js伪代码：

setTimeout("applyOverflowVisible()", transitionTime);

但是你当然可以在JavaScript中自己做这件事，但是你要在不同的地方分割代码，这会让其他人难以理解。我想使用像React这样的东西有帮助，但即使在那里我也想避免将CSS混入js。

Answer 5

如果有人像我一样看着答案，寻找一种动画的方式来裁剪需要溢出的元素-这是对我有用的解决方案：clip-path css property是可动画的并且非常有用多才多艺。

这是一个很酷的工具，可以用来获得正确的开始/结束值：https://bennettfeely.com/clippy/。

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

5 个答案: