我可以将 CSS 过渡应用于溢出属性吗?

Question

我正在尝试通过在body中添加类来单击div时body的overflow属性设置transition-delay，如下所示：

$("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 过渡的特定样式属性？

Answer 1

有许多属性无法转换。 overflow就是其中之一;渲染引擎不知道如何在"隐藏"和"显示"之间转换，因为它们是二元选项，而不是间隔。这与无法在display: none;和display: block;之间过渡的原因相同（例如）：没有中间阶段可用作过渡。

您可以在 Mozilla 开发者网络上查看可以在此处制作动画的属性列表。

Answer 2

您可以使用

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，并且还要注意两个动画不要重叠，否则它们会相互抵消。

Answer 3

溢出

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

Answer 4

如果有人像我一样正在查看答案，寻找一种对需要溢出的元素裁剪进行动画处理的方法 - 这是对我有用的解决方案：clip-path css 属性，它是可动画的并且非常通用。

这是一个很酷的工具，为了获得动画的正确开始/结束值：https://bennettfeely.com/clippy/。

Answer 5

Dmitry的答案应该是唯一被接受的答案，因为它是一个纯CSS解决方案，将延迟应用于"不可动画"属性。但是值得一提的是，应用动画的CSS规则应该在每次需要时都是"可触发的"。

例如，以下代码不起作用：

@keyframes show-overflow {
  from { overflow: hidden; }
}
.hideable, .overlay {
  font-size: 36px;
  height: 50px;
}
.hideable {
  transition: height 2s;
  overflow: visible;
  animation: show-overflow 2s;  /* this line should be in separate  "triggerable" CSS rule to work */
}
.hideable.hidden {
  height: 0;
  overflow: hidden;
}

<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
  Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
  This is the text to hide and show.  
</div>
<div class='overlay'>
  This is overlaying text
</div>

但是在将标记的属性移动到单独的 CSS 规则后，一切都按预期工作：

@keyframes show-overflow {
  from { overflow: hidden; }
}
.hideable, .overlay {
  font-size: 36px;
  height: 50px;
}
.hideable {
  transition: height 2s;
  overflow: visible;
}
.hideable:not(.hidden) {
  animation: show-overflow 2s;  /* now this works! */
}
.hideable.hidden {
  height: 0;
  overflow: hidden;
}

<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
  Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
  This is the text to hide and show.  
</div>
<div class='overlay'>
  This is overlaying text
</div>

Answer 6

你不能在二进制属性之间转换是有道理的，例如overflow: hidden;和overflow: visible但如果不是"转换"，那就太好了（在 js 伪代码中：

setTimeout("applyOverflowVisible()", transitionTime);

但是，

当然，您可以在JavaScript中自己执行此操作，但是您将代码拆分到各个地方，并且可能会使其他人难以理解。我想使用 React 之类的东西会有所帮助，但即使在那里，我也想避免将 css 混合到 js 中。