JavaScipt30(第五个案例)（主要知识点：flex布局）

承接上文，这是第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));