CSS 过渡突然停止答案

【问题标题】：CSS transition stops abruptlyCSS 过渡突然停止
【发布时间】：2015-07-24 02:16:21
【问题描述】：

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

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

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

有人知道问题可能是什么吗？

【问题讨论】：

【解决方案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。你的阴影恰好有这个类，当它在屏幕上时，你将鼠标悬停在它上面，将它的最小不透明度设置为 0.5，直到它被移除。如果您单击关闭，然后将鼠标快速移出浏览器窗口，则过渡非常完美。

注意这个类（.close）在点击关闭按钮时被添加到元素中，在元素完全消失时被移除。

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

去掉opacity: 0.5;和filter: alpha(opacity=50);，过渡就稳定了。

【讨论】：

@user1879534 很高兴为您提供帮助
另一个快速的问题：在萤火虫中 (.close) 类只是一秒钟可见。我怎样才能看到这个更长的时间？
@user1879534 就像我在上面粗体部分所说的那样，.close 类在您单击关闭按钮时添加到元素中，并在转换完成时从元素中删除。您可以通过编辑 class="" 属性来手动添加类。

【解决方案2】：

我认为你不应该将诸如可见性：隐藏或显示：无之类的东西与不透明动画结合起来。如果您只使用不透明度而不使用所有可见性属性，会发生什么情况。这个动画突然停止的原因也是因为其他规则的执行。就在你的动画正在执行的时候。

【讨论】：