Warum beschleunigt sich mein einfacher Übergang, wenn ich ein Div ein- und ausblende? ⇐ HTML

[Guest]

Ich erstelle eine Frage- und Antwortseite im Akkordeon-Stil für ein aktuelles Projekt. Die Antwort auf die Frage wird durch Klicken auf die Frage angezeigt. Mein Ansatz besteht darin, die Antwort mit max-height = 0 und overflow = versteckt auszublenden. Wenn die Frage gedrückt wird, wird ein Indexwert aktualisiert, der den Klassennamen der Antwort auf aktiv setzt.

Code: Select all

{item.Answer}

Die maximale Höhe wird dann auf einen größeren Wert gesetzt, wodurch die Antwort angezeigt wird.

Code: Select all

.answer{
max-height: 0;
overflow: hidden;
margin-left:5rem;
transition: ease 0.7s;
}

.answer.active{
padding-bottom: 2rem;
max-height: 500px;
}

Das Problem, das auftritt, besteht darin, dass der Übergang beim Schließen einer Antwort mit gleichmäßiger Geschwindigkeit erfolgt, dann aber kurz vor dem vollständigen Schließen langsamer wird. Das Gleiche passiert beim Öffnen der Antwort, obwohl es weniger auffällig ist.
Ich habe versucht, den Übergangstyp in „Ease-in-out“ zu ändern, weil ich dachte, dass es ein Problem mit dem schließenden Übergang gab . Dies hat das Problem jedoch nicht behoben. Es gibt keine anderen Übergänge, die sich auf diesen Teil der Seite auswirken könnten.