JS30_05– Flex Panel Gallery

學習重點：flex、利用dom操作css樣式

步驟：添加各式CSS樣式與完成範例一樣> JS初始dom與事件綁定>toggle事件後的樣式

初始檔（左）/ 完成檔初始（右）

完成檔單一圖片點開後

1. flex空間分配

flex: flex-grow flex-shrink flex-basis
本練習運用flex:1（1 1 0%）以進行五等分
以及flex:5 別人是1的話，自己就是佔比5倍

不錯的文章、不錯的文章2

2. transitionend事件：CSS transition結束後發生 ＊MDN

自己設計時沒想那麼多，直接在open時加入屬性
click 時觸發：
.panel.open { font-size: 40px;}
.panel.open>*:first-child {transform: translateY(0%)}
.panel.open>*:last-child {transform: translateY(0%)}
_____
而Wes Bob則新增open--active的class，如此效果更有層次與範例才會一致
click 時觸發：
.panel.open { font-size: 40px;}
transitionend 時觸發：
.panel.open--active>*:first-child {transform: translateY(0%)}
.panel.open--active>*:last-child {transform: translateY(0%)}

3. This的運用：eventListener

此處的this指的是被綁定的doms，用this書寫讓程式碼簡潔
function toggleOpen() {
  this.classList.toggle(‘open’)
}

4. e.propertyName查看transition動畫的屬性

.panel.open {
   font-size: 40px;
   flex: 5
}
用e.propertyName查看會顯示

＊之前 JS30 Day1 也有運用到e.propertyName