JS css pseudo klasse

    Hallo, ich möchte Ein Element bei nem klick darauf "aufklappen"


    Hier möchte ich NUR mir der Höhe des Elements arbeiten UND mit transition..


    CSS
    #div{height: 30px;}
#div:hover{height: 80px; transition: height: 3s;}

    Klappt supi!


    Da ich jetzt aber mit JS nicht die klasse :hover hinzufügen kann und eine neue klasse mit

    CSS
    .ausklap{height: 80px; transition; height 3s;}

    einfüge, funktioniert die transition nicht :(
    (Klasse wird eingefügt, Höhe verändert sich aber keine trans.)


    Weis jemand wie man das löst?

    Vielleicht klappts mit dem Status :active
    Der wird aktiv, wenn man zB mit dem Tabulator spielt, bis ein Rahmen um das Teil liegt (zur Erinnerung). Musst du mal probieren, ob der auch bei einem Klick anspringt.

    Wenn du sowieso mit JavaScript arbeitest warum dann nicht mit JavaScript die Höhe setzen?


    JavaScript
    object.style.height="80px";


    Wenn du die Klasse änderst findet einfach keine Animation statt da wir theoretisch keine Umwandlung haben sondern eine Neudefinition. Pseudoklassen kann JavaScript nicht setzen da diese nur im reinen .css Dokument anzuwenden sind, in dem JavaScript keine Zugriffsrechte hat:

    HTML
    <div style="color: red;">Miau</div>
<!-- Wo sollen wir hier :hover anwenden? Garnicht! -->
    Zitat von wolf

    ... funktioniert die transition nicht ...


    Innerhalb der transition-Regel darf meines Wissens kein Doppelpunkt stehen. z. B.:

    CSS
    transition: eigenschaft dauer easing;
...
transition: color .2s linear;
-moz-transition: color .2s linear;
-webkit-transition: color .2s linear;
-o-transition: color .2s linear;


    Leider mag ich den Ansatz mit der Pseudoklasse nicht verstehen wenn du eh eine Klasse einfügst :huh:
    Oder war das ein entweder oder?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden