javascript - CSS 过渡仅在 Chrome 开发者工具打开时有效

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>

View on CodePen

Answer 1

CSS 不能在 display: none; 和 display: block;(属于 #popup 元素)之间设置动画。我更改为 #popup 的可见性。

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