所以,我正在尝试使用 CSS3 转换,因为它已经有些标准化,而且我们没有大量的前缀需要处理。我拥有的是一个基本的三行导航栏,单击时,两个栏会成一定 Angular ,中间的栏会消失(在此示例中,它保留在那里,但在我的元素中,它“消失”到出现在它后面的元素中恰好是相同的颜色)。顶部和底部的条是伪元素,中间的只是普通元素。
不好解释,所以我做了一个fiddle .
我遇到的问题是,在 Chrome 29 中,条形的颜色过渡有延迟。在 Firefox 和 IE10 中,转换有效。在 Chrome 中,翻译过渡有效,但背景颜色无效。在 Opera 中,两者都不起作用,而在 Safari 中……好吧,Safari 有它自己的问题。
标记很简单:
<nav>
<div id="menu">
<span></span>
</div>
</nav>
我正在使用 jQuery 1.8.3,而且我正在使用这个非常复杂的脚本。
$(document).ready(function() {
$('#menu').click(function() {
$(this).toggleClass('active');
$('nav').toggleClass('active');
});
});
我正在使用以下 CSS:
#menu { cursor: pointer; height: 30px; position: fixed; z-index: 200; }
#menu span { position: relative; margin-top: 10px; }
#menu span, #menu span:before, #menu span:after { height: 5px; background-color: #231F20; width: 50px; display: block; transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
#menu.active span:before, #menu.active span:after { background-color: #F2F2F2; }
#menu.active span:before { top: 0; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#menu.active span:after { bottom: 0; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#menu span:before, #menu span:after { position: absolute; display: block; content: ""; }
#menu span:before { top: -10px; }
#menu span:after { bottom: -10px; }
所以,我的问题是:为什么 Chrome 中的背景颜色没有过渡?我在 Opera 中做错了什么?我知道 Opera 现在经常依赖 -webkit- 前缀,所以我假设无论一个问题是什么,都是另一个问题。
而且,如果您真的觉得自己是解决问题的天才,您能告诉我为什么它在 Safari 上也变得不稳定吗?如果你能拿到的话,这是一颗金星和一 block cookies 。
非常感谢你们!
最佳答案
我想通了。
我将 CSS 更改为:
#menu { cursor: pointer; height: 30px; position: fixed; z-index: 200; }
#menu span { position: relative; margin-top: 10px; }
#menu span, #menu span:before, #menu span:after { height: 5px; background-color: #231F20; width: 50px; display: block; transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
#menu.active span:before, #menu.active span:after { background-color: #F2F2F2; }
#menu.active span:before { -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); }
#menu.active span:after { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); }
#menu span:before, #menu span:after { position: absolute; display: block; content: ""; }
#menu span:before { -webkit-transform: translateY(-250%); transform: translateY(-250%); }
#menu span:after { -webkit-transform: translateY(250%); transform: translateY(250%); }
而且它有效。你可以在这个fiddle上看到.
关于jquery - CSS3 过渡可能存在的 Webkit 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19108648/