Gleiten in einem festen element mit CSS3 transitions

Habe ich ein element mit fester position und auto-Breite (müssen auto-Breite), die Folie von der linken Seite.

Habe ich definiert zwei Staaten für Sie: versteckt und sichtbar. Wenn sichtbar sollte es sein, positioniert auf der linken Seite des Fensters, wenn Sie versteckt es sollte nur außerhalb der Ansicht.

Visible-Status

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

Ausgeblendeten Zustand

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

Beiden Staaten zeigt ok, wenn der übergang ist statisch, ohne animation.

Alternative 1: CSS3-Transformationen

Habe ich auch versucht, mit Hilfe von CSS3 transforms, die funktioniert, aber ich fürchte, der cross-browser-Unterschiede. Wenn die übergänge nicht unterstützt übergang würde automatisch fallen wieder auf statisch ändern, aber wenn ich mit CSS3 Transformationen, es gibt keine direkte fall-back. Es muss explizit definiert werden.

Dies ist ein arbeiten demo der Effekt mit CSS3-übergängen und verwandelt. Wie Sie sehen können, die Breite der linken Leiste ist weit, wie viel, wie es zu und er gleitet nur über die linke Kante, wenn Sie in die versteckt Zustand.

Alternative 2: Einstürzende element Breite

Könnte dies irgendwie getan werden, durch die Manipulation element Breite (zwar auch mit min/max-width Unterstützung auto-Breite), aber das problem mit diesem ist, dass der Inhalt nicht bewegen. Es ist offensichtlich, dass die Elementbreite wird manipuliert.
Wir verschieben das element samt Inhalt.

Frage

Gibt es eine Möglichkeit zu vermeiden, CSS3 wandelt, während auch befriedigend folgenden Regeln:

• Breite muss sein auto
• sichtbar, wenn es ' s positioniert auf der linken Fenster Kante
• wenn Sie versteckt es sich knapp außerhalb des linken Randes