内部元素在 css3 转换后仍然不可见答案

【问题标题】：inner elements remains invisible after a css3 transition内部元素在 css3 转换后仍然不可见
【发布时间】：2012-05-29 14:27:59
【问题描述】：

在完成 css3 转换后，回调使内部元素可见（使用通用选择器和 opacity 属性）。

在以下情况下，它们在屏幕上保持不可见。最奇怪的是，当使用控制台并“检查元素”时，它们神奇地出现了。

此错误发生在 Chrome 19.0.1084.52 上，但不在 Safari 5.1.5 上

我怀疑存在渲染错误、某些无法触发的内部浏览器触发器或类似情况。

【问题讨论】：

所以当我点击一次按钮时，红色边框飞出，然后我需要再次点击它才能出来内容。您是否试图同时触发过渡和可见性？
由于文本不会缩放框的大小，我想让它在红框完成过渡后出现。所需的步骤是： 1/ 红框达到 100% 高度和宽度 2/ 过渡结束，并启动下一个 3/ 内部文本出现它似乎有效，但内容一直隐藏，直到元素通过控制台检查。它甚至可以用鼠标选择，但仍然不可见。
这很有趣 - 它也适用于 Firefox，所以我猜这很可能是 Google Chrome 中的一个错误。
我想是的。一个错误问题已解决code.google.com/p/chromium/issues/detail?id=130081

【解决方案1】：

-webkit-backface-visibility: hidden

Webkit 错误。尝试使用上面的代码，它可能会帮助您解决问题。此外，您可能想使用transform: scale() 而不是宽度和高度。

【讨论】：

【解决方案2】：

试试http://jsfiddle.net/tT84s/13/

摇动 DOM 似乎有效。在这个小提琴中，我重新附加了过渡元素的子元素（以它们最初定位的顺序）。它似乎在小提琴中工作 - 尽管这里提到的一些解决方案不适用于我们对这个错误的具体体验。

一般来说，强制更改 DOM 似乎是可行的。但是请注意，插入和删除 <div> 无效。去搞清楚！祝你好运，每个人都请尝试为这个或相关的小提琴/错误演示发布你的工作解决方案。例如，这可能适用于简单地添加和删除最后一个孩子 - 以避免执行不必要的 appendChild 操作。

【讨论】：