4

Webkitでは、次のフィドルが期待どおりに機能します。つまり、#navigationの左側のパディングは0から100pxに適切に移行されます。

Firefoxでは、同じコードがどういうわけか遷移の発生を防ぎます。

http://jsfiddle.net/threehz/JEMN6/27/

私のcss:

#navigation {
  background: #ccc;
  -webkit-transition: padding-left 0.125s ease;
  -moz-transition: padding-left 0.125s ease;
  transition: padding-left 0.125s ease;
  margin: 0;
  padding-left: 0;
  width: 100%;
}

.fixed #navigation {
  padding-left: 100px;
}

.fixed #page-navigation {
   position: fixed; // removing this results in #navigation transition working properly in firefox
   height: auto;
   border-top: 1px solid #000;
   width: 100%;
}

親要素の位置の変化に関係しているようです。上記のように、親要素からposition:fixedを削除すると、Firefoxでトランジションが機能します。

http://jsfiddle.net/threehz/JEMN6/28/

問題は、私が達成しようとしていることのために、ヘッダーを固定する必要があり、子のパディングプロパティを遷移させる必要があるため、位置を削除するだけです。固定はオプションではありません。

考え?

4

2 に答える 2

3

トランジションは、Firebug/DevToolsから切り替えると機能します。その一方で:

  • liアイテムにtransform: translate(100px)またはposition: absolute+を使用するまたはleft: 100px
  • 遷移遅延の使用

動作しません。移行イベントは発生しません:/(http://jsfiddle.net/JEMN6/25/

FFは、#page-navigationコンテナの再描画(position: fixedドキュメントフローを削除するため)と、の同時再描画を処理できないようです#navigation child。そのため、遷移イベントは中止されます。

#fixedAlex Moralesが示唆しているように、アニメーションを使用することもできますが、クラスを削除するときにトランジションを取得するには、反対のアニメーションが必要になります。

JavaScriptを介して最小限の遅延を導入することもオプションです。

$('#toggle').click('on', function() {
  $('body').toggleClass('fixed');

  setTimeout(function () {
    $('#navigation').toggleClass('get-padding')
  }, 20);
});

http://jsfiddle.net/JEMN6/26/

ただし、理想的なソリューションではありません。

于 2012-11-16T19:53:30.393 に答える
2

これは私にはhttps://bugzilla.mozilla.org/show_bug.cgi?id=625289のように見えます。親はCSSボックスを再構築しているため、子の古い計算スタイルは失われます。

于 2012-11-29T21:08:12.000 に答える