Всем привет)
Ребят, вопрос весьма простой, как я думаю, но я что-то в ступор попал. Помогите пожалуйста понять причину тормоза анимации, когда переношу логику в отдельную функцию.
Все примеры я расположил в codepen, чтобы можно было сразу увидеть суть проблемы. Для анимации я использую метод element.animate, в который передаю keyframes с опциями.
В примере 1, он
находится тут, всю логику я написал внутри основной функции, без выноса логики управления анимацией в отдельную. В этом случае анимация работает как нужно, плавно, при раскрытии и также при сворачивании элемента.
В примере 2, он
находится тут, я решил вынести логику анимации в отдельную функцию, чтобы потом можно было ее юзать в других местах и столкнулся с проблемой. Когда кликаешь на элемент и начинается его раскрытие, то происходит подтормаживание и потом элемент резко раскрывается, без анимации, а при сворачивании все происходит плавно.
Почему такое происходит? Я ведь передаю, в обоих случаях, в keyframe метод element.clientHeight - для расчета высоты элемента, чтобы плавно его раскрыть и затем плавно свернуть, но с выносом логики в отдельную функцию происходят тормоза. Хочу также заметить, что когда мы меняем в keyframes анимацию высоты на анимацию opacity - все работает хорошо и в первом и втором случаях.
Быть может кто-то знает причину такого нюанса? Хочу разобраться в этом, заранее спасибо.
