只有在Chrome开发工具打开时,CSS过渡才有效

时间:2018-05-10 03:37:09

标签: javascript css css-transitions

我在CSS转换中遇到了一个奇怪的异常现象。负载完全忽略了转换;但是,如果我打开Chrome开发工具并将DOM树导航到#popup > div > img并选择它,然后单击主图像,过渡就会起作用,即使开发工具关闭也会保持这种状态。

https://codepen.io/rosuav-the-styleful/pen/RyQXvq

我怀疑是我犯了一些我无法看到的奇怪错误。但是当打开Dev Tools试图探测我的CSS时,它突然开始工作,它有点难以调试!

在Chrome 66.0.3359.139上测试过。 Codepen和独立的HTML文件中的行为相同。

我的目的是点击小图片以显示更大的图像。弹出窗口可见,单击任意位置将关闭该弹出窗口。展示和解散弹出窗口都应该顺利过渡;对于这个演示,这是一个不透明度的变化,然后改变图像的顶部(使其从屏幕上方滚动)。通过在HTML元素上设置类来控制弹出窗口。

1 个答案:

答案 0 :(得分:7)

CSS无法在display: none;display: block;#popup元素之间)制作动画。我更改为#popup的可见性。

您可以在此处查看新代码:https://codepen.io/anon/pen/KRoPwM。希望这会有所帮助。