[英]CSS transition works only if Chrome Dev Tools open
I've run into a bizarre anomaly with CSS transitions. 我遇到了CSS转换的奇怪异常。 The transition is completely ignored on load;
负载完全忽略了转换; but if I open up Chrome Dev Tools and navigate the DOM tree to
#popup > div > img
and select it, then click on the main image, the transition becomes functional, and remains so even if Dev Tools is closed. 但是如果我打开Chrome Dev Tools并将DOM树导航到
#popup > div > img
并选择它,然后单击主图像,转换就会起作用,即使Dev Tools关闭也会保持这种状态。
My suspicion is that I've made some weird mistake that I can't see. 我怀疑是我犯了一些我看不到的奇怪错误。 But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug!
但是当打开Dev Tools试图探测我的CSS使它突然开始工作时,它有点难以调试!
Tested on Chrome 66.0.3359.139. 在Chrome 66.0.3359.139上测试过。 The behaviour is the same in Codepen and as a stand-alone HTML file.
Codepen和独立的HTML文件中的行为相同。
My intention is for clicking on the small image to show a larger one. 我的目的是点击小图片来显示更大的图像。 With the popup visible, clicking anywhere will dismiss that popup.
弹出窗口可见,单击任意位置将关闭该弹出窗口。 Both showing and dismissing the popup should transition smoothly;
展示和解散弹出窗口都应该顺利过渡; for this demo, that's an opacity change followed by a change to the image's top (making it scroll in from above the screen).
对于这个演示,这是一个不透明度的变化,然后改变图像的顶部(使其从屏幕上方滚动)。 The popup is controlled by setting a class on the HTML element.
通过在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>
CSS can't animate between display: none;
CSS无法在
display: none;
之间设置动画display: none;
and display: block;
和
display: block;
(of the #popup
element). (
#popup
元素)。 I changed to visibility for #popup
. 我改为
#popup
可见性。
You can see the new code here: https://codepen.io/anon/pen/KRoPwM . 您可以在此处查看新代码: https : //codepen.io/anon/pen/KRoPwM 。 Hope this helps.
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.