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

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