Почему существуют два разных варианта поведения при переходе? ⇐ Javascript

[Anonymous]

Я создал аккордеон в vanilla JS, и все работает нормально, но я не понимаю одного: почему существует разница в переходе между .panel и H3? Когда вы нажимаете на H2, элемент div, содержащий H3, сдвигается вниз, но вы замечаете, что .panel открывается «быстрее» (я имею в виду, по крайней мере, тип перехода другой), чем появляется H3. А при закрытии все наоборот: H3 исчезают быстрее, чем .panel. То же самое касается и .sub-панели нижнего уровня.
Я создал CodePen, чтобы проиллюстрировать свою точку зрения, с низкой скоростью, чтобы лучше увидеть происходящее явление.
Я полагаю, это связано с нормальным поведением сетки? Или я его не вижу.
Спасибо.
РЕДАКТИРОВАНИЕ: я трачу время на написание своего вопроса, который считаю актуальным и законным, с как можно большим количеством подробностей, предоставляя код, а затем бац, отрицательный голос! Это действительно расстраивает, особенно когда нет объяснений... Я мог бы просто удалить свой вопрос и задать ИИ :/ По крайней мере, он меня не осудит (так строго)!

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

class Accordion {
constructor(container) {
this.container = container;
this.init();
}
init() {
this.container.querySelectorAll('h2, h3').forEach(h => {
h.setAttribute('tabindex', '0');
});
this.container.addEventListener('click', (e) => {
const heading = e.target.closest('h2, h3');
if (heading) {
this.toggle(heading);
}
});
this.container.addEventListener('keydown', (e) => {
if (e.target.matches('h2, h3') && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
this.toggle(e.target);
}
});
}
toggle(heading) {
const item = heading.parentElement;
const isH2 = heading.tagName === 'H2';
const isOpen = item.classList.contains('open');
if (isH2) {
this.container.querySelectorAll('.panel.open').forEach(h2 => {
if (h2 !== item) {
h2.classList.remove('open');
h2.querySelectorAll('.sub-panel.open').forEach(h3 => {
h3.classList.remove('open');
});
}
});
if (isOpen) {
item.classList.remove('open');
item.querySelectorAll('.sub-panel.open').forEach(h3 => {
h3.classList.remove('open');
});
} else {
item.classList.add('open');
}
} else {
item.parentElement.parentElement.querySelectorAll('.sub-panel.open').forEach(h3 => {
if (h3 !== item) h3.classList.remove('open');
});
item.classList.toggle('open');
}
}
}
new Accordion(document.querySelector('.accordion'));

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

.accordion {
margin: 0 auto 2rem;
max-width: 800px;
}
.accordion .panel {
background: #dfd6c9;

}
.accordion > div:not(fist-of-type) {
margin-bottom: 10px;
}
h2, h3 {
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 1rem 1.5rem;
transition: background-color 0.3s ease;
user-select: none;
}
h2 {
background: #1d7fc7;
font-size: 20px;
font-weight: 600;
}
h3 {
background: #c91a5c;
font-size: 18px;
font-weight: 500;
padding-left: 2.5rem;
}
h2:hover, h3:hover {
background-color: #222;
}
.open > h2 {
background-color: #000;
}
.open > h3 {
background-color: #111;
}
h2 > span,
h3 > span {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
position: relative;
flex-shrink: 0;
}
h2 > span::before,
h3 > span::before,
h2 > span::after,
h3 > span::after {
content: '';
position: absolute;
background: #fff;
transition: transform 0.3s ease;
}
h2 > span::before,
h3 > span::before {
width: 12px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 > span::after,
h3 > span::after {
width: 2px;
height: 12px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.open > h2 > span::after,
.open > h3 > span::after {
transform: translate(-50%, -50%) rotate(90deg);
}
h2 + div,
h3 + div {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 1s;
}
.open > h2 + div,
.open > h3 + div {
grid-template-rows: 1fr;
}
h2 + div > div,
h3 + div >  div {
overflow: hidden;
min-height: 0;
}
h2 + div p,
h3 + div p {
margin: 0.5rem 0;
padding: 0 1.5rem;
}
h3 + div p {
padding: 0 2.5rem;
}

/* LAYOUT */
* {
box-sizing: border-box;
}
body {
padding: 0 20px 20px;
font-family: system-ui, -apple-system, sans-serif;
}

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

Main section 1






Subsection 1.1




Contents of the subsection 1.1





Subsection 1.2




Contents of the subsection 1.2

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