我可以对溢出属性应用CSS转换吗？

当单击

div

时，我试图将

转换延迟设置为
body
的
溢出
属性，方法是将类添加到
body
，如下所示：


$（“div”）。单击（函数（）{
$（“body”）.addClass（“无溢出”）；
});
div{
背景：石灰；
高度：2000px；
}
.no_溢出{
溢出：隐藏；
}
正文{
溢出：自动；
过渡：溢出0 2s；
}

我是div
有许多属性无法转换<其中代码>溢出
；渲染引擎不知道如何在“隐藏”和“显示”之间转换，因为这些是二进制选项，而不是间隔。这也是为什么不能在
display:none和
显示：块（例如）：没有中间阶段可用作转换

您可以在Mozilla Developer Network上看到可以设置动画的属性列表。
overflow不是CSS可设置动画的属性。您可以看到可设置动画的CSS属性的完整列表。
您不能在二进制属性之间转换是有道理的，例如
溢出：隐藏
和
溢出：可见
，但如果不是“转换”，而是（在js伪代码中：

setTimeout("applyOverflowVisible()", transitionTime);

当然，你可以自己用JavaScript来实现这一点，但是你会在不同的地方分割代码，这会让其他人很难理解。我想使用React之类的工具会有所帮助，但即使在那里，我也希望避免将css混合到js中。
你可以用
动画来模拟延迟：


$（“div”）。单击（函数（）{
$（“body”）.addClass（“无溢出”）；
})；
div{
背景：石灰；
高度：2000px；
}
.没有溢出{
溢出：隐藏；
/*从动画中保留溢出值*/
动画：7秒延时溢出；
}
身体{
溢出：自动；
}
@关键帧延迟溢出{
来自{overflow:auto；}
}

我是div
，以防有人在寻找答案，就像我一样，寻找一种方法来制作需要溢出的元素的裁剪动画-这是一个对我有效的解决方案：可以制作动画并且非常通用

这里有一个很酷的工具可以使用，以便为动画获得正确的开始/结束值：。
我想到，作为一种替代方法，您可以转换
高度
，而不是
溢出
属性，以获得大致相同的外观。@TylerH：可以尝试。但必须注意浏览器的外观高度。另外，当
溢出
是
隐藏
时，不会以同样的方式裁剪窗口。无论如何，我最终使用了
设置超时
；）太棒了！我正在寻找一种方法来隐藏模式容器上的滚动条，直到模式的淡入转换完成。小哈奇，但这成功了，就是这样！不要说“无法通过转换设置动画”，而是显示一个只使用css的解决方案。据我所知，唯一的例外是
可见性
，因为您只能使用
可见
、
隐藏
、和
折叠
，这意味着两者之间没有任何关联，但它仍然尊重动画步骤；这对于设置子菜单的动画效果非常好。@Smithee我不确定你说的是什么，
可见性
属性是唯一的例外。有多个（n>1）属性可以转换，有多个（n>1）属性不能转换。