Annette Halbestund: CSS3 transitions ohne fixe Angaben?

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

  1. 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

    1. @@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 🖖

      --
      “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
      1. 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

  2. @@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 🖖

    --
    “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl