Add and remove playing class when key pressed with transition

hypatiah · hypatiah · commit cae28972f865 · 2016-12-09T14:47:23.000-08:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -60,13 +60,24 @@
 <script>
   window.addEventListener('keydown', function(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    console.log(audio)
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
     if(!audio) return; //stop function all together
     // note if call .play on audio element already playing, it won't play again. so if press "F" in successsion it will only play every 5 sec
     audio.currentTime = 0; //rewind to the start, so that it can be played many times quickly
     audio.play();
-
+    // CSS: transition:all .07s;
+    //.playing adds transform:scale(1.1);
+    key.classList.add('playing');
   });
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // skip it if its not a transform
+    // here this = key div
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all .1s;
   width:100px;
   text-align: center;
   color:white;
