CSS Animate von/zu „auto“

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich habe keinen Zweifel daran, dass CSS dies eines Tages erlauben wird, aber im Moment kann man die Breite oder Höhe eines Elements nicht von einem festen Wert auf „auto“ animieren. Dies ist besonders nützlich, wenn man von versteckt zu sichtbar animieren möchte, wie bei JQuerys slideDown(). Nikita Vasilyev zeigt, wie man es mit einem Hauch von JS machen kann, aber immer noch CSS für die eigentliche Animation/Transition verwendet.

Das Schwierigere ist *zu* auto: 1) Breite messen 2) auto setzen 3) erneut messen 4) zurück zum vorherigen Wert setzen 5) Neuzeichnen erzwingen 6) Transition anwenden 7) Breite auf den gemessenen auto-Wert ändern 8) wirklich auf auto setzen. #wipesbrow

Und ja, es gibt die max-height/width-Technik, aber ich bin kein Fan davon. Sie stört die Timing der Transition und erfordert magische Zahlen.

Direkter Link →