通过 Jquery 显示内容时无法使 CSS3 动画工作答案

【问题标题】：Unable to get a CSS3 animation to work when showing content through Jquery通过 Jquery 显示内容时无法使 CSS3 动画工作
【发布时间】：2015-05-29 10:15:06
【问题描述】：

我正在尝试创建一个在展开表格时使用 css3 动画的可展开表格。本质上，当您切换详细信息时，我们会在表格中添加一个新行。此内容内部有条，应该有一个标记，该标记根据在条标记数据属性中设置的宽度从左到右进行动画处理。 <div class="marker" data-width="50"></div>

不幸的是，我无法使用动画进行切换。奇怪的是，我可以创建一个单独的按钮来“重新渲染”，然后它就可以完美地动画了。

很难真正进一步解释，所以请查看演示问题的小提琴：

https://jsfiddle.net/vmef28df/21/

任何帮助将不胜感激！

【问题讨论】：

所以，一旦蓝条可见，您希望它们开始左右动画？

标签： jquery html css css-animations

【解决方案1】：

问题是您无法在将元素添加到 DOM 后立即对其进行动画处理。如果您有一个带有display: none; 和opacity: 0; 的元素并且您想将其动画化为opacity: 1;，也会发生同样的情况。您需要做的是使用requestAnimationFrame 或使用超时。我将超时添加到您的JSFiddle

【讨论】：

我唯一担心的是我讨厌添加任意超时。我认为这可能意味着一台计算机真的很慢，5 毫秒可能还不够？
我也不喜欢在这种情况下使用超时。我认为浏览器向 DOM 添加元素的 5 毫秒应该足够长了。如果你担心电脑速度慢，你应该质疑你的动画，因为在速度慢的电脑上它无论如何都不会流畅运行。如果慢速等于 Modernizr ）并且在这种情况下不运行超时/动画。