我在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元素上设置类来控制弹出窗口。
答案 0 :(得分:7)
CSS无法在display: none;
和display: block;
(#popup
元素之间)制作动画。我更改为#popup
的可见性。
您可以在此处查看新代码:https://codepen.io/anon/pen/KRoPwM。希望这会有所帮助。