css - 当父项暂时隐藏且不显示时，webkit 会丢失过渡动画

Question

似乎当我们更改过渡子元素的父元素的显示属性时，在 webkit 中子元素的动画停止 - 当元素的显示恢复时，子样式显示为好像过渡已经完成/ css 过渡属性不存在。

在 firefox 中，过渡不会中断，就好像即使父元素（和内部元素）暂时隐藏，元素也会继续过渡

这是该问题的复制：https ://tinker.io/95219/1动画，然后在矩形过渡时隐藏显示。尝试在 Firefox 和 webkit 中查看差异

这是一个已知的错误？

Answer 1

使用visibility: hidden;而不是display: none;似乎有效。

像这样：https ://tinker.io/95219/3

.hidden {
    visibility: hidden;
}

如果您想模拟display: none;（即好像元素确实完全隐藏），您可以将高度设置为零，如下所示：https ://tinker.io/95219/4 （必须定位#container而不是#parent实现这一点。

#container.hidden {
    visibility: hidden;
    height: 0;
}