Verschieben in einem festen Element mit CSS3-Übergängen

Ich habe ein Element mit fester Position und automatischer Breite (muss eine automatische Breite haben), die von links einschieben sollte.

Ich habe zwei Zustände dafür definiert: versteckt und sichtbar . Wenn es sichtbar ist, sollte es auf der linken Seite des Fensters positioniert werden, wenn es versteckt ist, sollte es gerade außerhalb der Ansicht sein.

Sichtbarer Zustand

Versteckter Zustand

Diese beiden Zustände werden angezeigt, wenn der Übergang statisch ohne Animation ist.

Alternative 1: CSS3 transformiert

Ich habe auch versucht, CSS3 Transformationen zu verwenden, was funktioniert, aber ich habe Angst vor Cross-Browser-Unterschiede. Wenn Übergänge nicht unterstützt werden, würde der Übergang automatisch auf statische Änderungen zurückfallen, aber wenn ich CSS3-Transformationen verwende, gibt es keinen direkten Fallback. Es muss explizit definiert werden.

Dies ist eine funktionierende Demo des Effekts, indem Sie CSS3-Übergänge und Transformationen verwenden. Wie Sie sehen können, ist die Breite der linken Leiste so breit wie sie sein muss und sie gleitet gerade über die linke Kante hinaus, wenn sie in den versteckten Zustand geht.

Alternative 2: Breite des kollabierenden Elements

Das könnte man irgendwie tun, indem man die Elementbreite manipuliert (während man auch die Breite von max / min benutzt, um die automatische Breite zu unterstützen), aber das Problem dabei ist, dass sich der Inhalt nicht bewegt. Es ist offensichtlich, dass die Elementbreite manipuliert wird. Wir müssen das Element einschließlich seines Inhalts verschieben.

Frage

Gibt es eine Möglichkeit, CSS3-Transformationen zu vermeiden und dabei die folgenden Regeln zu erfüllen:

• width muss automatisch sein
• wenn es sichtbar ist, wird es an der linken Fensterkante positioniert
• wenn es ausgeblendet ist, befindet es sich gerade außerhalb der linken Kante