Question

所以，我正在尝试CSS3过渡，因为它有点标准化，我们没有需要处理的前缀加载。我所拥有的是一个基本的三线导航栏，当点击时，两个条形成角度，中间就消失了（在这个例子中它停留在那里，但在我的项目中它“消失”成一个出现在它后面的元素碰巧是相同的颜色）。顶部和底部条形图是伪元素，中间条形图是正常元素。

很难解释，所以我做了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上出现问题呢？如果你能得到它，那就是金星和饼干。

非常感谢你们！

Answer 1

我明白了。

我将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上看到它。

CSS3过渡可能的Webkit Bug

1 个答案: