所以,我现在正在尝试使用CSS3转换,因为它有点标准化,我们没有前缀的重载处理。我所拥有的是一个基本的三排导航栏,当点击时,两个酒吧的角度和中间消失(在这个例子中,它停留在那里,但在我的项目中,它“消失”到一个出现在它后面的元素,恰好是相同的颜色)。顶部和底部的条是伪元素,中间的是正常的元素。使用CSS3转换的可能的Webkit错误
这很难解释,所以我做了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上变得无足轻重吗?如果你能得到它,那就是金星和饼干。
非常感谢你们!
伪元素的过渡在过去一直很过时 –