При повторном клике на элемент происходит зажержка анимации
Подскажите, почему при повторном клике на элемент происходит 2-х секундная пауза? Т.е. нажимаю первый раз - событие срабатывает сразу, нажимаю второй раз - событие срабатывает через 2 секунды. Как убрать эту 2-х секундную задержку?
if (document.querySelector('.tab-description')?.innerHTML) {
document.querySelector('.tab-description').onclick = function () {
document.querySelector('.woocommerce-Tabs-panel--description').classList.toggle('tab-active');
}
}
if (document.querySelector('.tab-reviews')?.innerHTML) {
document.querySelector('.tab-reviews').onclick = function () {
document.querySelector('.woocommerce-Reviews').classList.toggle('tab-active');
}
}
CSS
.woocommerce-Tabs-panel--description {
max-height: 0;
transition: all 2s ease 0s;
overflow: hidden;
}
.woocommerce-Reviews {
max-height: 0;
transition: all 2s ease 0s;
overflow: hidden;
}
.tab-active {
max-height: 800px;
transition: all 2s ease 0s;
}
Ответы (1 шт):
Автор решения: Олег
→ Ссылка
Все отрабатывается как надо. Ваша анимация разворачивается до 800 пикселей меньше, чем за 2 секунды, и когда сворачивается — начинает с 800, доходит до реальной высоты блока и потом продолжает. Чтобы решить проблему — вычисляйте высоту через element.scrollHeight, и меняйте инлайново стили, изменяя height