CSS过渡突然停止

我已经添加了全屏覆盖导航到我的小博客，我用这个代码：http://tympanus.net/Development/FullscreenOverlayStyles/index.html CSS过渡突然停止

正如你所看到的，过渡十分流畅，尤其是当你关闭覆盖。但是，在我的网站关闭动画突然停止：（点击图标旁边的标志）

http://blog.thomasveit.com/

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

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

2014-04-08 Tommy

注意此代码在引导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);并且转换是稳定的。

来源

2014-04-08 07:50:08 David

你是老板！ :-) – Tommy

@ user1879534很高兴帮助 – David

另一个快速的问题：在firebug中（.close）类只是第二次可见。我怎么能看到这更长的？ – Tommy

我认为你不应该使用不透明动画来组合可见性：hidden或display：none。如果仅在不具有所有可见性属性的情况下使用不透明度，会发生什么情况。此动画突然停止的原因还在于其他规则的执行。正当你的动画正在执行。

来源

2014-04-08 07:57:09

但那只是我的直觉。我没有看到这一点。 –

CSS过渡突然停止

回答

相关问题