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