Раздел аккордеона JavaScript сразу же открывается после закрытия (состояние гонки с переходом?) ⇐ Javascript

[Anonymous]

Я создаю аккордеон на чистом HTML/CSS/JS, который управляет несколькими складными панелями.

Большинство разделов работают отлично — плавно открывают, закрывают и вращают стрелку, — но один конкретный раздел («Настройки») мгновенно открывается сразу после закрытия.
Это похоже на синхронизацию или состояние гонки вокруг события перехода.

Если я удалю этот прослушиватель, раздел закроется, но никогда не будет анимироваться должным образом. еще раз.
Вот минимальный воспроизводимый пример (упрощенный HTML, CSS, JS):

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

document.querySelectorAll('.accordion-btn').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.closest('.accordion-item');
const panel = item.querySelector('.accordion-panel');
const isOpen = item.classList.contains('open');

document.querySelectorAll('.accordion-item').forEach(i => {
const p = i.querySelector('.accordion-panel');
i.classList.remove('open');
p.style.height = '0px';
});

if (!isOpen) {
item.classList.add('open');
panel.style.height = '0px';
requestAnimationFrame(() => {
panel.style.height = panel.scrollHeight + 'px';
});
}
});
});

document.addEventListener('transitionend', e => {
if (e.propertyName !== 'height') return;
const panel = e.target;
const item = panel.closest('.accordion-item');
if (item && item.classList.contains('open')) {
panel.style.height = 'auto';
}
});

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

.accordion-panel {
height: 0;
overflow: hidden;
transition: height .35s ease;
}
.accordion-item.open .accordion-panel {
height: auto;
}
.icon {
display: inline-block;
transition: transform .3s ease;
}
.accordion-item.open .icon {
transform: rotate(90deg);
}

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

▶ Calculate charging time


Some content...




▶ Settings


Settings content...

Проблема:

• Каждый раздел ведет себя правильно, кроме раздела Настройки.
• При закрытии он мгновенно открывается сам по себе.
• Похоже, переход срабатывает в неподходящее время, сбрасывая высоту на автоматический даже хотя .open уже удален.

Как это исправить, чтобы панель оставалась закрытой, а переходы оставались плавными?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ondition-w