Div verkleinern, mit Animation, letzte Zeile soll stehen bleiben

[Gunnar Bittersmann]

@@Jörg Reinholz:

nuqneH

transition:height .2s;
  -moz-transition:height .2s; /* Firefox 4 */
  -webkit-transition:height .2s; /* Safari and Chrome */
  -o-transition:height .2s; /* Opera */

Die präfixfreie Eigenschaft sollte immer zuletzt stehen, damit diese wirkt, wenn ein Browser das Feature mit und ohne Präfix unterstützt. Aus demselben Grund sollte -webkit- zuerst stehen, damit die Eigenschaft mit dem richtigen browserspezifischen Präfix wirkt, wenn ein Nicht-Webkit den -webkit-Präfix und seinen eigenen unterstützt.

Firefox 4?? Prust. Firefox unterstützt transition seit 16.0 präfixfrei; also kaum ein Grund, -moz- noch zu verwenden.

Das sollte also eher so aussehen:

{  
  -webkit-transition: height .2s;  
  -o-transition: height .2s;  
  transition: height .2s;  
}

height:11em; //auto geht leider nicht

Deshalb bietet es an, transition nicht auf height, sondern auf max-height anzuwenden. Das Zuklappen ist etwas problematischer als das Aufklappen. http://forum.de.selfhtml.org/archiv/2012/7/t210463/#m1434719 ff.

<div id="dasIsses" style="position:absolute; top:200px; left:100px; width:600px;background-color:#ddf; border:1 px solid black">

Was bitte soll das denn?? Ab ins Stylesheet mit den Angaben, nicht inline.

Qapla'