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

Question

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

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

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

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

 document.getElementById("clickme").onclick = function(ev) { document.documentElement.classList.add("show-modal"); ev.stopPropagation(); } document.documentElement.onclick = function() { this.classList.remove("show-modal"); } 

 #clickme { max-height: 300px; cursor: pointer; margin: 20px; border: 1px solid #ddd; border-radius: .25rem; padding: 10px; } #popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0px; z-index: 2000; padding-top: 30px; display: none; } .show-modal #popup { display: block; } #popup img { display: block; margin: auto; position: relative; top: -500px; opacity: 0; transition: top .5s 1s, opacity .25s; } .show-modal #popup img { top: 0px; opacity: 1; } #popup>div { margin: auto; } 

 <p><img id=clickme src="http://devicatoutlet.com/img/birthday.png"></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p> <div id="popup"> <div><img src="http://devicatoutlet.com/img/birthday.png"></div> </div> 

在CodePen上查看

Answer 1

CSS无法在display: none;之间设置动画display: none; 和display: block; （ #popup元素）。 我改为#popup可见性。

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