SLIDE-Menü verlässt kurzzeitig sein Gridelement

[Rolf B]

Hallo einsiedler,

das ist schon ziemlich tricky und liegt daran, wie sich deine Animationen überlagern.

(1) Das details-Element fährt von 0 auf 32ch auf (2) Der nav-wrapper hat eine Breite von 100% - 100% vom details-Element. Er verbreitert sich also auch von 0 auf 32ch (allerdings nicht die ch vom nav-wrapper, weil der eine andere font-size als das details-Element hat…) (3) Der nav-wrapper wird verschoben, von translateX(100% auf translateX(0%)

Und hier wird es spannend, denn der Prozentwert im translateX bezieht sich auf die Breite des Elements. Dadurch wächst die Breite des details-Elements linear, der Translate verändert sich aber quadratisch (weil die lineare Breitenänderung und die lineare Verschiebung sich multiplizieren). Und wenn Du von einer Parabel eine Gerade abziehst, gibt's genau diese Bewegung.

Wie man es RICHTIG macht, hängt davon ab, welche Bewegung Du Dir vorstellst. Ob ich es dann auch richtig hinkriege, kann ich spontan noch nicht sagen 😉

Rolf