Аккордеон, основанный на деталях и сводках, анимированный с помощью JavaScript, не работает должным образом в браузере C ⇐ CSS

[Anonymous]

Вот аккордеон, элементы «подробности» которого открываются и закрываются с помощью параметра «maxHeight». Анимация развертывания/свертывания выполняется с помощью CSS.

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

document.querySelectorAll('summary').forEach(el => el.addEventListener('click', (event) => {
const details = event.target.parentElement;
const onAnimationEnd = cb => details.addEventListener(
"animationend", cb, {
once: true
}
);
details.classList.add('expand');
if (details.open) {
event.preventDefault();
details.classList.add('collapse');
onAnimationEnd(() => {
details.classList.remove('expand', 'collapse');
details.removeAttribute("open");
});
setTimeout(() => {
details.dispatchEvent(new Event('animationend'));
}, 500);
}
}));

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

details {
max-height: 2rem;
overflow: hidden;
background-color: #eee;
}

details>p {
margin-top: 0;
}

summary {
min-height: 2rem;
border-top: solid 1px #ccc;
background-color: #fff;
}

.expand {
overflow: hidden;
max-height: 10rem;
transition: max-height .5s ease-out;
}

.collapse {
overflow: hidden;
max-height: 2rem;
transition: max-height .5s ease-out;
}

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

Accordion Summary 1
Accordion Content 1


Accordion Summary 2
Accordion Content 2


Accordion Summary 3
Accordion Content 3


Text

Этот код работает должным образом в браузере Firefox, но не в Chrome. браузер. Если один элемент «подробности» открыт, и я нажимаю на другой закрытый элемент «подробности», чтобы открыть его, уже открытый элемент «подробности» закрывается автоматически, поскольку атрибут «открыть» удаляется из этого элемента «подробности». На самом деле атрибут «open» должен оставаться в этом элементе «details». CSS-анимация больше не работает для этого элемента «подробности», поскольку класс CSS «expand» не был удален. Я подумал, что, возможно, за это ответственно всплытие событий, и использовал «stopPropagation». Но это не помогло.
Обычно автоматическое закрытие открытого элемента «Подробности» при нажатии на другой закрытый элемент «Подробности» необходимо программировать отдельно. В моем случае автоматическое закрытие — нежелательный побочный эффект в браузере Chrome.

@CBroe
Хорошо , теперь я изменил CSS, чтобы мне не приходилось запускать событие onanimationend вручную:

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

    details {
max-height: 2rem;
overflow: hidden;
background-color: #eee;
}

details[open] {
max-height: 10rem;
}

details > p {
margin-top: 0;
}

summary {
min-height: 2rem;
border-top: solid 1px #ccc;
background-color: #fff;
}

.expand {
animation-name: expand-height;
animation-duration: .5s;
animation-timing-function: ease-out;
overflow: hidden;
}

.collapse {
animation-name: collapse-height;
animation-duration: .5s;
animation-timing-function: ease-out;
overflow: hidden;
}

@keyframes expand-height {
0% {
max-height: 2rem;
}
100% {
max-height: 10rem;
}
}

@keyframes collapse-height {
0% {
max-height: 10rem;
}
100% {
max-height: 2rem;
}
}

Вот измененный код JavaScript:

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

    document.querySelectorAll('summary').forEach(el => el.addEventListener('click', (event) => {
const details = event.target.parentElement;
const onAnimationEnd = cb => details.addEventListener(
"animationend", cb, { once: true }
);
details.classList.add('expand');

if (details.open) {
event.preventDefault();
details.classList.add('collapse');
onAnimationEnd(() => {
details.classList.remove('expand', 'collapse');
details.removeAttribute("open");
});
}
}
));

HTML-код тот же:

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

  
Accordion Summary 1
Accordion Content 1


Accordion Summary 2
Accordion Content 2


Accordion Summary 3
Accordion Content 3


Text

Однако это не отвечает на мой вопрос: почему аккордеон не работает должным образом в браузере Chrome?

Я могу добиться небольшого улучшения, удалив CSS-класс «expand» в конце анимации «expand»:

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

    document.querySelectorAll('summary').forEach(el => el.addEventListener('click', (event) => {
const details = event.target.parentElement;
const onAnimationEnd = cb => details.addEventListener(
"animationend", cb, { once: true }
);
details.classList.add('expand');
onAnimationEnd(() => {
details.classList.remove('expand');
});

if (details.open) {
event.preventDefault();
details.classList.add('collapse');
onAnimationEnd(() => {
details.classList.remove('collapse');
details.removeAttribute("open");
});
}
}
));

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

Подробнее здесь: https://stackoverflow.com/questions/784 ... nt-work-as