当不透明度设置为0时，调试元素在页面加载时出现的原因

Question

如果主持人不认为这个问题可以接受，我很抱歉。

我只是不确定如何调试此问题，因为有大约1或2秒的时间来发现问题。

请查看this website。

带有彩色块的打开消息设置为不透明度0然后使用jQuery，在延迟之后，我们将不透明度设置为1并使用CSS过渡来创建效果。

据我所知，所有三个方块都以相同的方式构建，但由于某种原因绿色方块在不透明度= 0开始之前在页面加载时短暂显示。

任何人都可以发现为什么会发生这种情况或建议我如何处理这个问题，Chrome开发工具中所有三个模块的所有内容都是一样的。

我很感激任何建议。提前谢谢。

Answer 1

解决了这个问题，与加载jQuery没什么关系。

在jQuery将不透明度设置为0之前，特定媒体查询及以上的display: block CSS声明会暂时覆盖基本默认值display: none。