当父项暂时隐藏且显示无时，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;
}