感謝https://javascript30.com/的免費教程

Demo:http://codepen.io/FutureFronterAndy/pen/KNrmbx

學習點：

<script>
const panels=document.querySelectorAll(".panel");

function toggleOpen(){
console.log('Hi');

this.classList.toggle('open');

}
function toggleActive (argument) {
// body... 
console.log(argument.propertyName);
if(argument.propertyName.includes('flex-grow')){
this.classList.toggle('open-acive');

}

}
panels.forEach(panel=>panel.addEventListener('click', toggleOpen));
panels.forEach(panel=>panel.addEventListener('transitionend', toggleActive));


</script>

js中使用toggle，簡單易懂

if(argument.propertyName.includes('flex-grow')){
this.classList.toggle('open-acive');

includes為包含參數中有包含flex-grow

.panel > *:first-child {
transform: translateY(-100%);
}

.panel.open-acive > *:first-child {
transform: translateY(0);
}

.panel > *:last-child {
transform: translateY(100%);
}

.panel.open-acive > *:last-child {
transform: translateY(0);
}

比較特別，對於last-child, 和fisrt-child的動畫做設定