11

左からスライドインする固定位置と自動幅 (自動幅が必要) を持つ要素があります。

これには、 hiddenとvisibleの 2 つの状態を定義しました。表示されている場合はウィンドウの左側に配置する必要があり、非表示の場合はビューのすぐ外側に配置する必要があります。

可視状態

left: 0;
/* right: auto; */

隠し状態

right: 100%;
/* left: -element auto width */

トランジションがアニメーションなしで静的な場合、これらの状態は両方とも正常に表示されます。

代替案 1: CSS3 変換

また、動作する CSS3 変換を使用してみましたが、ブラウザ間の違いが心配です。トランジションがサポートされていない場合、トランジションは自動的に静的な変更にフォールバックしますが、CSS3 トランスフォームを使用する場合、直接のフォールバックはありません。明示的に定義する必要があります。

これは、CSS3 トランジションとトランスフォームを使用した効果のデモです。ご覧のとおり、左側のバーの幅は必要なだけ広く、非表示の状態になると左端をわずかに超えてスライドします。

代替案 2: 要素の幅を縮小する

これは、要素の幅を操作することでなんとかすることができます (自動幅をサポートするために最大/最小幅も使用します) が、これの問題は、コンテンツが移動しないことです。要素の幅が操作されていることは明らかです。コンテンツを含む要素を移動する必要があります。

質問

次のルールも満たしながら、CSS3 変換を回避する方法はありますか。

  • 幅は自動でなければなりません
  • 表示されている場合は、ウィンドウの左端に配置されます
  • 非表示の場合、左端のすぐ外側に配置されます
4

1 に答える 1

11

要素を別の div にラップする必要があります。

HTML

<div id="wrapper">
    <div id="element">
        Lorem ipsum dolor sit.
        <br />
        Lorem ipsum dolor sit amet.
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae explicabo!
    </div>
</div>

そして との間で#element遷移します。left: 0%left: -100%

実際の例: http://codepen.io/anon/pen/vgzcI

于 2013-09-13T08:09:07.057 に答える