CSS3 transitions ohne fixe Angaben?

[Annette Halbestund]

Hallo,

ich habe eine <HEADER> Leiste, der ich auf Knopfdruck gerne eine "SlideOut-Funktion" verpassen würde.

Habe mich da ein wenig mit CSS3 "transition" und der Anpassung von "height", aber auch "top" gespielt - was ja prinzipiell funktionieren würde, allerdings nur in Verbindung mit einer genauen Angabe der Ausgangswerte von "width", "height" sowie "position" des zu animierenden Elements.

Nun steht fixen Angaben zu "width", "height" und "position" in meinem Fall die Welt des responsiven Webdesigns diametral gegenüber; nur funktionieren CSS3 transitions ohne diese fixen Angaben eben nicht.

...daher meine Frage: welche Möglichkeit habe ich [ohne Einbindung externer Bibliotheken / ohne jquery] ein DIV mit einer Transition zu versehen, wobei für "height" und "width" dynamisch die aktuell gültigen Ausgangswerte übernommen werden (habe es mit "width: 100%", bzw. "height: 100%" probiert, was aber nicht funktioniert) ?

Danke!

LG, Annette

[marctrix]

Hej Annette,

transistions müssen sich berechnen lassen. es muss also eine bekannte ausgangsposition geben, von der aus das gewünschte Ergebnis berechnet werden kann.

Also: nein, ohne Ausgangsgröße (und bekannte Endgröße) geht es nicht.

Marc

[Gunnar Bittersmann]

@@marctrix

Also: nein, ohne Ausgangsgröße (und bekannte Endgröße) geht es nicht.

Mit 0% als Ausgangsgröße und -100% als bekannter Endgröße geht es doch.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Also: nein, ohne Ausgangsgröße (und bekannte Endgröße) geht es nicht.

Mit 0% als Ausgangsgröße und -100% als bekannter Endgröße geht es doch.

Habe es nicht ausprobiert, aber da es sich berechnen lässt, sollte das gehen.

Marc

[Gunnar Bittersmann]

@@Annette Halbestund

Habe mich da ein wenig mit CSS3 "transition" und der Anpassung von "height", aber auch "top" gespielt - was ja prinzipiell funktionieren würde, allerdings

… sollte man das nicht tun, sondern nur mit opacity und transform spielen.

Da vici!

LLAP 🖖