1

そのため、CSS3 トランジションはある程度標準化されており、処理するプレフィックスが大量にないため、CSS3 トランジションを試しています。私が持っているのは、基本的な 3 行のナビゲーション バーです。クリックすると、2 つのバーが斜めになり、中央が消えます (この例ではそこにとどまりますが、私のプロジェクトでは、その背後に表示される要素に「消えます」たまたま同じ色です）。上と下のバーは疑似要素で、真ん中は通常の要素です。

説明するのが難しいので、フィドルを作りました。

私が抱えている問題は、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 でもうまくいかないのか教えていただけますか? それは金の星とクッキーです。

どうもありがとう！

4

1 に答える 1

0

私はそれを考え出した。

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で確認できます。

于 2013-10-01T05:55:31.583 に答える