學習筆記：
關鍵
1. 設定CSS
2. 取得元素的控制權
3. 監聽按鈕
4. 控制按鈕來改變CSS
設定CSS變數
//最外圈的css要橫排
.panels {
min-height: 100vh;
overflow: hidden;
display:flex;
}
//每一格的css要置中,等分
.panel {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
//設定文字的排列,等分
.panel > * {
margin: 0;
width: 100%;
transition: transform 0.5s;
flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
//設定css動畫
.panel > *:first-child { transform: translateY(-100%); }
.panel.open-active > *:first-child { transform: translateY(0%); }
.panel > *:last-child { transform: translateY(100%); }
.panel.open-active > *:last-child { transform: translateY(0); }取得元素的控制權
const panels = document.querySelectorAll('.panel');監聽元素
panels.forEach(panel => panel.addEventListener('click',toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend',toggleActive));控制元素來改變CSS
function toggleOpen(){
this.classList.toggle('open');
}
function toggleActive(e){
if(e.propertyName.includes('flex')){
this.classList.toggle('open-active');
}
}每次看到不同思維，都覺得很有收穫，補充在下方
//一樣都是選擇判斷，不同做法
function toggleActive(e){
if(e.propertyName.includes('flex')) {
this.classList.toggle('open-active');
}
}
function toggleActive(e){
if(e.propertyName.indexOf('flex')!== -1) {
this.classList.toggle('open-active');
}
}
