CSS3 Animation bei Größenänderung

[SapuSeven]

Hallo, ich habe folgendes Problem:

Ich habe ein div mit einem immer unterschiedlich langem Text, der mit

text-overflow: ellipsis;

gekürzt wurde. Beim Überfahren mit der Maus soll die Höhe des divs zunehmen, bis der gesamte Text sichtbar ist. Diese Größenänderung soll nicht ruckartig geschehen, sondern animiert werden, dass es innerhalb einer Sekunde auf die Endgröße wächst.

Wie animiere ich das?

[Jörg Reinholz]

Moin!

Beim Überfahren mit der Maus soll die Höhe des divs zunehmen, bis der gesamte Text sichtbar ist. Diese Größenänderung soll nicht ruckartig geschehen, sondern animiert werden, dass es innerhalb einer Sekunde auf die Endgröße wächst.

Wie animiere ich das?

transition: height 1s;

oder

transition: text-overflow 1s;

hast Du schon probiert?

Jörg Reinholz

[SapuSeven]

transition: height 1s;

Also

#mydiv {
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: height 1s;
}
#mydiv:hover {
	white-space: normal;
}

?

Nein, funktioniert nicht, vielleicht weil ich die Höhe nicht explizit ändere...

[Tabellenkalk]

Hallo,

Nein, funktioniert nicht, vielleicht weil ich die Höhe nicht explizit ändere...

so sieht es aus. gib die Höhe explizit an, z.B. in px oder em. Dann funktionierts, mit auto oder 100% leider nicht so wirklich.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

gib die Höhe explizit an, z.B. in px oder em.

Und welchen Wert? Woher soll man wissem, wie groß die Höhe ist?

Wie ich letztens schon sagte:

Man kann nun nicht height zwischen 0 und auto animieren, sondern nur zwischen zwei Zahlenwerten. Da die Höhe unbekannt ist, wird max-height zwischen 0 und einem hinreichend großen Wert (im Beispiel 4em) animiert.

Beispiel.

Das hat zur Folge, dass beim Zuklappen die sichtbare Animation nicht sofort nach dem Drücken des Button erfolgt, d.h. dass der Nutzer kein sofortiges Feedback zu seiner Aktion erhält. Unschön.

Abhilfe könnte sein, mit JavaScript die Höhe des gerenderten (geöffneten) .details-Elements auszulesen und dann zwischen 0 und diesem Wert zu animieren.

Ich hab das jetzt nicht mit einem Screenreader getestet. Aber interessant dürfte sein, was letztens über den Ticker lief.

LLAP

[SapuSeven]

Gibt es denn keine CSS-Angabe oder JS-Funktion, dass jede Größenänderung animiert wird?

[Gunnar Bittersmann]

@@SapuSeven

Gibt es denn keine CSS-Angabe oder JS-Funktion, dass jede Größenänderung animiert wird?

Welcher Teil von „Man kann nun nicht height zwischen 0 und auto animieren, sondern nur zwischen zwei Zahlenwerten“ war jetzt unverständlich?

LLAP

[SapuSeven]

Wie kann ich per JS die CSS3-Eigenschaft transition setzen?

this.style.transition funktioniert nicht, da style ein css2object ist

[Gunnar Bittersmann]

@@SapuSeven

Wie kann ich per JS die CSS3-Eigenschaft transition setzen?per JS tun?

Warum willst du das

this.style.transition funktioniert nicht

Doch, funktioniert.

da style ein css2object ist

Nein. JS unterscheidet nicht, ob es CSS-Eigenschaften schon in CSS 1, 2 oder erst in 3 gibt.

LLAP

[SapuSeven]

Meine vollendete Lösung: Ich zeige den Bereich erweitert an , lese per js die Höhe über offsetHeight aus, setze diese Höhe als height-angabe im :hover-style und setze die Höhe im normal-style auf 32px (die Ausgangshöhe).