JS30 筆記 01 - JavaScript Drum Kit
===


## 題目
按下鍵盤 ASDFGHJKL
1. 對應字母的邊框發亮特效
2. 對應字母的字體變大再縮小
3. 播放音效

## 解題
1. 新增按鍵事件，當按鍵按下，檢查是否有為螢幕上的 ASDFGHJKL 按鍵，是的話播放音效，並播放特效
2. 利用 [transitionend](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend)事件，在 CSS transition 結束後觸發，移除 CSS 特效 playing(變大有金框)

###### tags: `JS30` `JavaScript`