我在我的小博客中添加了一个全屏覆盖导航,我使用了这个代码:http://tympanus.net/Development/FullscreenOverlayStyles/index.html
如您所见,过渡非常平滑,尤其是当您关闭叠加层时。但是在我的网站上,关闭动画突然停止:(单击 Logo 旁边的图标)
我认为问题可能是元素的高度,因为我知道这是 Javascript/jQuery 动画的常见问题,但这并没有解决问题...
有人知道问题出在哪里吗?
最佳答案
在您的 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);
过渡稳定。
关于javascript - CSS 过渡突然停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22930514/