CSS过渡仅在Chrome Dev Tools打开时有效

问题描述

我在CSS转换中遇到了一个异常现象。加载时将完全忽略过渡；但是如果我打开Chrome Dev Tools并将DOM树导航到 #popup> div> img 并选择它，然后单击主图像，该转换将起作用，并且即使关闭了开发工具也是如此。

I've run into a bizarre anomaly with CSS transitions. 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.

我的怀疑是我犯了一些看不见的怪异错误。但是，当打开Dev Tools尝试探查我的CSS时，它突然开始工作了，调试起来有点困难！

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!

在Chrome 66.0.3359.139上进行了测试。行为与Codepen相同，并且与独立的HTML文件相同。

Tested on Chrome 66.0.3359.139. The behaviour is the same in Codepen and as a stand-alone HTML file.

我的意图是单击小图像以显示大图像。在弹出窗口可见的情况下，单击任意位置将关闭该弹出窗口。显示和关闭弹出窗口都应平稳过渡；对于此演示，这是不透明性更改，然后是图像顶部的更改（使其从屏幕上方滚动）。通过在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.

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无法在显示之间进行动画处理：无; 和 display：block; （属于 #popup 元素）。我更改为 #popup 的可见性。

CSS can't animate between display: none; and display: block; (of the #popup element). I changed to visibility for #popup.

您可以在此处看到新代码：。希望这会有所帮助。

You can see the new code here: https://codepen.io/anon/pen/KRoPwM. Hope this helps.

这篇关于CSS过渡仅在Chrome Dev Tools打开时有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！