CSS-Problem bei handorgel.js

[thymian]

Hallo zusammen,

ich habe ein CSS-Blackout beim neuen Akkordeon, vielleicht hat jemand eine Idee?

Hier bei der Demo: https://oncode.github.io/handorgel/, aber auch bei Erdmann und Freunde: https://solo-3.contao-theme.de/ueber-mich.html sieht man, dass der Content ".handorgel__content__inner" immer nach dem Umschlag ".handorgel__content" abgearbeitet wird. Das führt dazu, dass die Transitions nicht mehr smooth laufen.

Beim alten Akkordeon war das ein Traum. Während der Umschlag weich nach unten fuhr, blendete sich auch schon der Inhalt ein. Ich krieg das bei handorgel.js einfach nicht hin. Hier wird zuerst der Umschlag geöffnet, dann setzt erst die transition für den Inhalt ein.

Was mich auch irritiert, ist, dass die Transitions sowohl im geschlossenen als auch im aktiven Zustand notiert sind. Ich dachte, die werden nur im geschlossenen Zustand notiert, im geöffneten steht dann eigentlich nur noch die konkrete Änderung von z. B. height und opacity?

Und dann gibt es da noch ".handorgel__content--opened .handorgel__content__inner" und ".handorgel__content--open" .

PS: Ich bin mit dem Akkordeon CSS-mäßig nicht so ganz glücklich. Es sind einige Voreinstellungen, die man erstmal zurücksetzen muss, wie Linien unter der Überschrift, über dem Content oder ein grauer Background beim Inhalt.

Freue mich über Tipps.

[zoglo]

Was meinst du mit "nicht mehr smooth". Hast du ein Gegenbeispiel wie es sein sollte?

[Spooky]

Ich denke @thymian meint, dass mit dem Default CSS von Handorgel zuerst die Animation des öffnen abspielt und danach die Fade-In Animation startet - anstatt beides gleichzeitig.

[thymian]

Ja, genau, Spooky. Ein Beispiel ist hier: ... Aber das ist das Mootools-Accordion.

[zoglo]

Das wäre etwas, was in der Library (Handorgel) verbessert werden könnte.

1. Das display: none auf .handorgel__content führt dazu, dass es keine Animationen gibt
2. Die Transition kann zusätzlich auf .handorgel__content--open .handorgel__content__inner greifen

Kein Bug in Contao, hier wird nur das CSS der Library genutzt:
https://github.com/oncode/handorgel

[thymian]

Ich habe jetzt die opacity von .handorgel__content__inner im geschlossenen Zustand einfach auf 1 gesetzt, so passt es für mich.