CSS过渡突然停止

Question

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

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

http://blog.thomasveit.com/

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

任何人都知道问题可能是什么？

Answer 1

在引导程序CSS文件（第4908行）中注意此代码

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

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

请注意，单击关闭按钮时会将此类（.close）添加到元素中，并在元素完全消失时将其删除。

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

删除opacity: 0.5;和filter: alpha(opacity=50);，转换稳定。

Answer 2

我认为你不应该将可见性：hidden或display：none与不透明度动画结合起来。 如果您仅使用不具有所有可见性属性的不透明度，会发生什么。 此动画突然停止的原因是因为其他规则的其他执行也是如此。正好在你的动画执行时。