Почему мой плавный переход ускоряется при раскрытии и скрытии элемента div? ⇐ Html

[Anonymous]

Я создаю страницу вопросов и ответов в виде гармошки для недавнего проекта. Ответ на вопрос открывается при нажатии на вопрос. Мой подход заключается в том, чтобы скрыть ответ с помощью max-height = 0 и overflow = Hidden. Когда вопрос нажимается, он обновляет значение индекса, что делает имя класса ответа активным.

Код: Выделить всё

{item.Answer}

Затем для max-height устанавливается большее значение, что дает ответ.

Код: Выделить всё

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

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

Проблема заключается в том, что когда я закрываю ответ, переход происходит с постоянной скоростью, но затем замедляется прямо перед полным закрытием. То же самое происходит и при открытии ответа, хотя это менее заметно.
Я попробовал изменить тип перехода на «облегченный-выход», думая, что возникла проблема с закрывающимся переходом. . Но это не решило проблему. Других переходов, которые могли бы повлиять на эту часть страницы, нет.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ding-a-div