承接上文，这是第5个案例：这节没什么讲的，随便记录下吧，主要是用了flex布局与transform translateY，js部分和案例1类似。
附上项目链接: https://github.com/wesbos/JavaScript30
const panels = document.querySelectorAll('.panel');
function toggleOpen() {
// 第一个案例讲过,classList还有其他方法,toggle就是其中一个,他会自动变化class,有则删除,无则新增
this.classList.toggle('open');
}
function toggleActive(e) {
// 看flex-grow是否变化
if (e.propertyName.includes('flex')) {
this.classList.toggle('open-active');
}
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));