Day5 Flex Panels

發表於 | 分類於 | 閱讀次數:
| 634

Demo

這次的範例重點應該是在flex,js部分反而前面都用過了。

自訂(新增)的樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.panels{
  display: flex;
}
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.panel p:nth-child(1) {transform: translateY(-100%);}/*一開始*/
.panel.open p:nth-child(1) {transform: translateY(0%);}/*有active時*/
.panel p:nth-child(3) {transform: translateY(+100%);}/*一開始*/
.panel.open p:nth-child(3) {transform: translateY(0%);}/*有active時*/

/*這是我們要操控的class*/
.panel.open {
  flex: 6;/*區塊放大*/
  font-size:40px;/*文字也放大*/
}

推薦flex教學小遊戲：flexboxfroggy

flex排版真的很好用，用了會上癮。

讓它動起來吧

這次的範例意外的簡單，就當作複習吧

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

我們在Day4的第六題有介紹到querySelectorAll選取後得到的是一個NodeList他不具陣列的所有功能。
但這邊我們仍可以用forEach去針對每個.panel做事件觸發

因為效果需要他先click放大後，文字再出現，所以我們才使用兩個事件去觸發：click、transitionend。

1
2
panels.forEach(panel=>{panel.addEventListener('click',openHandler)})
panels.forEach(panel=>{panel.addEventListener('transitionend',activeHandler)})

我們在Day1的transitionend事件有介紹到，要記得：

transitionend會針對每一個屬性去觸發，如果有很多屬性記得做個簡易判斷：

1
if(e.propertyName !== "transform") return

重點

1
2
3
4
5
6
7
8
9
10
11
12
const panels = document.querySelectorAll('.panel')

function openHandler(){
  this.classList.toggle('open')
}
function activeHandler(e){
  console.log('go')
  this.classList.toggle('active')
}

panels.forEach(panel=>{panel.addEventListener('click',openHandler)})
panels.forEach(panel=>{panel.addEventListener('transitionend',activeHandler)})

直覺上會直接加上toggle('active'),但我們加上console.log('go')去觀察會得到：

go跑了兩次！！也就是說我們的acticv也toggle兩次，出現又馬上消失了。

所以為什麼transitionend跑了兩次呢?我們console.log(e)來看看這兩次是什麼：

這驗證了我們講的:transitionend會針對每一個屬性去觸發

所以我們就挑一個propertyName來做執行就好了，加入一個判斷:

1
if(e.propertyName !== 'font-size') return

就大功告成啦
…目前寫過最快最簡短的一天

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
const panels = document.querySelectorAll('.panel')

function openHandler(){
  this.classList.toggle('open')
}
function activeHandler(e){
  if(e.propertyName !== 'font-size') return
  this.classList.toggle('active')
}

panels.forEach(panel=>{panel.addEventListener('click',openHandler)})
panels.forEach(panel=>{panel.addEventListener('transitionend',activeHandler)})

不負責任聲明ಥ◡ಥ：
純屬個人筆記，每個範例都有不同的寫法，還有很多細節可以加入，有任何問題都歡迎提出一起研究哦，我會很感謝您的！- 2018.08.11

0%