Elemente fließend ein- / ausblenden

[molily]

Hallo,

ich hatte auch mal das Problem, dass ein Element unbekannter Größe bei Mouseover langsam von 0 auf die benötigte Größe wachsen sollte. Ich habe dazu nach dem Laden der Seite das Element eingeblendet (display:block), seine Größe gemessen und dann wieder ausgeblendet. Das hat im Browser noch nicht mal "geflackert".

Klar, mit JavaScript ist das alles kein Problem und schon tausendfach gelöst. Über offsetWidth/-Height funktionieren ja sämtliche Bibliotheken, die die Größe animieren. Allerdings wurde hier behauptet, CSS-Transitions wären eine »simple Lösung« und es ginge ohne JavaScript. »Wo ist der Nicht-Hilfreich-Button?«™ SCNR. ;)

Natürlich gibt es viele Fälle, wo CSS-Transitions ausreichen. Es gibt aber keine generelle Lösung, die die Flexibilität von jQuery#fadeIn/fadeOut bzw. slideUp/slideDown erreicht, sondern man muss sich im Einzelfall etwas zusammenbasteln. (ich hab’s jedenfalls nicht einfach hinbekommen. Vom Gegenteil lasse ich mich gerne überzeugen.)

Wenn man von 0 zu width: auto animieren will, ist es am robustesten, mit JavaScript die Endgröße auszulesen und später .style.width zu setzen. Die Animation kann dann nativ per CSS-Transition erfolgen. Sinnvollerweise sollte man .style.width nach Ablauf der Animation (transitionend-Event) wieder löschen.

So etwas erledigt jQuery alles von alleine. Will man das selbst nachbauen, merkt man, dass es keine »simple Lösung« gibt, weder mit CSS-Transitions noch mit klassischen JavaScript-Animationen, die Inline-Styles bei jedem Frame ändern.

Mathias