0

次のコードは、pCSS3（実際にはWebkit）トランジションで水平方向に折りたたまれて展開される要素を示しています。

<style>
  div * {
    display: inline-block;
  }

  p {
    overflow-x: hidden;
    white-space: nowrap;
    -webkit-transition: width 1s;
  }​
</style>

<div>
  <a><i>begin</i><p><s>middle</s></p><b>end</b></a>
  <a id="after">after</a>
</div>

<script>
  $('div > a').each(function() {
    var a, p;
    a = $(this);
    p = $('p', a);
    a.toggle((function() {
      p.width(0);
    }), function() {
      p.width(p[0].scrollWidth);
    });
  });
</script>

http://jsfiddle.net/qrf3E/

Chromeを使用するときに望ましい効果があります： http ：//www.screenr.com/vJH7

ただし、Safari（デスクトップおよびモバイル）では、コンテナ要素の見かけの幅は、内側のコンテナが折りたたまaれたときに拡張された幅にスナップバックします。pこれにより、次の要素が強制#after的に宇宙に浮かび上がります...ヘルプ！これはSafariのバグですか？誰かが修正を提供できますか？

http://www.screenr.com/qJH7

4

2 に答える 2

1

私が思いついた修正の 1 つは、単一のピクセルに折りたたんでから非表示にすることです。

a.toggle(function() {
  p.one('webkitTransitionEnd', function() {
    p.hide();
  });
  p.width(1);
}, function() {
  p.show();
  p.width(p[0].scrollWidth);
});

http://jsfiddle.net/corin/LsSk2/

誰でもそれを改善できますか？

于 2012-11-13T14:13:16.650 に答える
0

まあ、これはサファリ開発者によって忘れられたデフォルト値のようです.

設定すればa { display: inline; }動作します。http://jsfiddle.net/2t388/

于 2012-11-13T14:16:35.647 に答える