javascript - CSS 过渡突然停止

Question

我在我的小博客中添加了一个全屏覆盖导航，我使用了这个代码:http://tympanus.net/Development/FullscreenOverlayStyles/index.html

如您所见，过渡非常平滑，尤其是当您关闭叠加层时。但是在我的网站上，关闭动画突然停止:(单击 Logo 旁边的图标)

http://blog.thomasveit.com/

我认为问题可能是元素的高度，因为我知道这是 Javascript/jQuery 动画的常见问题，但这并没有解决问题...

有人知道问题出在哪里吗？

Answer 1

在您的 bootstrap CSS 文件中记下这段代码(第 4908 行)

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

这会将 .close 元素的不透明度设置为 0.5 onHover。你的阴影恰好有这个类，当它在屏幕上时，你将鼠标悬停在它上面，将它的最小不透明度设置为 0.5，直到它被删除。如果单击关闭，然后快速将鼠标移出浏览器窗口，则过渡完美。

请注意，此类 (.close) 在单击关闭按钮时添加到元素，并在元素完全消失时删除。

一旦它从 DOM 中移除，您就停止将鼠标悬停在它上面，但此时，最后的 50% 不透明度会立即移除。

移除 opacity: 0.5; 和 filter: alpha(opacity=50); 过渡稳定。