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

Question

似乎当我们更改过渡子元素的父元素的 display 属性时，在 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;
}