WES BOS系列影片
Alex快速導讀系列影片

作者可能怕我們忘記flex怎麼用，在中間穿插了這個課程，
練習JS之餘，也能夠再複習一下flexbox
所以在一開始的範例檔案，給我們還未排列好的版面，那就先來寫CSS吧!

首先需要把圖片變成直排，在panels加上display:flex

.panels {
  display:flex;
}

是變成直排沒錯，但全部擠在一起了，所以需要去設定每個panel的寬度

.panel {
  flex:1;
}

設定完寬度，來調整字的位置，我們希望字置中，一樣可以用flex來解決

.panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

調整讓字的區塊平均分布

/* Flex Children */
.panel > * {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

最後，寫上等等JS要控制的class

.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); }

.panel.open {
  flex:5;
}

JS部分
1.先抓取需要控制的div

const panels = document.querySelectorAll('.panel')

2.設置click監聽器

panels.forEach(panel => panel.addEventListener('click', toggleOpen))

3.toggleOpen函式控制class加上或去除

function toggleOpen () {
  this.classList.toggle('open')
}

4.設置transitionend監聽器

panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))

5.toggleActive函式控制class加上或去除

function toggleActive (e) {
  if (e.propertyName.includes('flex')) {
    this.classList.toggle('open-active')
  }
}

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30