iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
2
Modern Web

實作經典 JavaScript 30系列 第 3

Day03:來做個鍵盤鼓手(二)

接續第一天的練習,
我們成功加上了樣式,卻沒有移除它。
開始來想辦法在我們不需要這個樣式時,將它移除

JS的監聽器也是可以監聽元素的變化,
這時我們監聽的動作會是 'transitionend'
需要監聽的元素就是每一個在畫面上的按鍵,
所以可以用querySelectorAll把這些按鍵全部選起來

const keys = document.querySelectorAll('.key')

接著就是用forEach的方式檢查每一個按鍵是否已經'transitionend',
如果整個變化動作已經完成,就將.playing的樣式移除

keys.forEach ( key => key.addEventListener('transitionend',removeTransition))

removeTransition 為移除樣式的函式名稱,準備好監聽器後,
接下來剩下如何移除樣式了
準備好removeTransition這個函式

function removeTransition(e) {
    console.log(e)
  }

看看按下按鍵後會印出甚麼東西,結果發現,所有css樣式的轉變都被監聽起來了。
我們只需要挑出其中一個且變化最長時間的,所以就選擇transform吧。

function removeTransition(e) {
    if(e.propertyName === 'transform') {
        this.classList.remove('playing')
    }
  }

功能都完成了,可以整理一下程式碼,function放上方,執行的動作放下方
並把原本放在監聽器中的function抽出來,讓整體更好閱讀。
下方附上codepen連結提供參考
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day02:來做個鍵盤鼓手(一)
下一篇
Day04:用CSS + JS 做一個時鐘
系列文
實作經典 JavaScript 3030

1 則留言

0
五百億
iT邦新手 5 級 ‧ 2020-09-11 11:14:18

鍵盤不會被打壞吧

我要留言

立即登入留言