jQuery .css

[dave]

Hi,

Angenommen der Inhalt ist tatsächlich 100px hoch und du setzt die Dauer der Transition auf 1s.

Tu ich nicht. Ich würde schon eine für 9999 Pixel passende Zeit wählen.

Ich glaube nicht, dass das besonders oft möglich ist.
Aber kommt auf den konkreten Fall an.
Ist doch aber beinahe egal ob du da die max-height schätzt oder die transition-duration: Beides kann bei entsprechend komplexem Inhalt schnell mal komplett daneben liegen.

Dann dauert's nicht 1s bis es ausgeklappt ist sondern nur ~0.01s.

Dann hat der Aufklappeffekt auch eine angemessene Dauer. Bei verschieden hohen Bereichen dauert der Effekt verschieden lange, läuft aber bei allen mit derselben Geschwindigkeit, was ich nicht als Nachteil erachte.

Da hast du recht, das _muss_ kein Nachteil sein.
In den timing-functions ist man dennoch sehr stark eingeschränkt.

Da bedarf es dann doch etwas JavaScript. Nicht für die Transition selbst, sondern nach dem Rendern einmalig (lies: nach jedem Neurendern einmalig) die benötigte Höhe auslesen und max-height zuweisen. Oder dann auch height und die Transition darauf anwenden.

Ich kann den Vorteil die Höhe mit Javascript zu setzen gegenüber von .slideUp/Down nicht sehen.
Zumal ich bei der Javascript-Lösung sogar eine x-beliebige timing-function haben kann, nicht nur die, die mit cubic-bezier() oder steps() möglich sind.

Ich finde CSS-transitions ziemlich cool.
Sie haben jede Menge Anwendungsfälle.
Auf- und Zuklappen von Elementen gehört nicht dazu.
Natürlich könnte man irgendwie, aber warum sollte man?

~dave