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

[Anonymous]

Я создал аккордеон с помощью Vanilla JS, используя переходы «сетка-шаблон-строки». Аккордеон работает нормально, но я заметил странное поведение: контейнер (bg: бежевый) и его содержимое (красные H3) не анимируются с одинаковой скоростью, хотя оба используют одинаковое время (1 с):

• При открытии: контейнер (.panel > div) анимируется быстрее, чем появляется его содержимое (.panel > div > div).
• При закрытии: содержимое исчезает быстрее, чем контейнер закрывается.
  Почему здесь два разных варианта поведения перехода?

Я создал CodePen, чтобы проиллюстрировать свою точку зрения, с медленной скоростью, чтобы лучше увидеть происходящее явление. Вот также базовая версия во фрагменте.
Полагаю, это связано с нормальным поведением сетки?
Спасибо.

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

document.querySelector('.accordion').addEventListener('click', (e) => {
const heading = e.target.closest('h2, h3');
if (heading) {
heading.parentElement.classList.toggle('open');
}
});

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

* {
box-sizing: border-box;
}
body {
padding: 20px;
font-family: system-ui, -apple-system, sans-serif;
}
.accordion {
max-width: 800px;
margin: 0 auto;
}
.panel {
background: #dfd6c9;
margin-bottom: 10px;
}
h2, h3 {
cursor: pointer;
color: #fff;
margin: 0;
padding: 1rem 1.5rem;
user-select: none;
}
h2 {
background: #1d7fc7;
font-size: 20px;
}
h3 {
background: #c91a5c;
font-size: 18px;
padding-left: 2.5rem;
}
h2 + div,
h3 + div {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 1s ease;
}
.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;
}

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

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