iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
1
Modern Web

實作經典 JavaScript 30系列 第 7

Day07: Flexbox + JavaScript 製作手風琴版面

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


上一篇
Day06: 針對陣列的操作練習(二)
下一篇
Day08: Ajax Type Ahead with fetch() (一)
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言