如何从JavaScript播放CSS过渡效果

Question

I'm trying to play a sound when user clicks a button on screen. I have bound these buttons with keyboard keys. Like there is a button with id='A' which is bound to the keyboard key 'A'. So if user presses the key'A' from keyboard or presses the on screen button, the java script function written on that button will be called.

Here is the problem:

I have applied below css on buttons, which works fine if i click the on screen button. The desired ripple effect is shown. But when i press the keyboard button, the effect does not work.

To bind the keys i have written following JS code.

  document.onkeydown = function(e) { e = e || window.event; var key = (e.which || e.keyCode), pressed = { 65: 'A', 83: 'S' }; if (typeof pressed[key] === 'undefined') return; document.getElementById(pressed[key]).click(); } 

 .button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 10px; width: 100px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .button:after { content: ""; background: #f1f1f1; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } 

 <button class="button" type="button" id="A">A</button> <button class="button" type="button" id="S">S</button> 

So how can i show the ripple effect even when the user presses the keyboard key?

Answer 1

It seems you cannot use :active alone here since Javascript is unable to trigger that state. Instead additonally create a class .active and put it on the element.

.button.active:after { ... }

See Triggering CSS :active selector for non-anchor elements

Since it kind of touches the topic, the global accesskey attribute might be interesting for you as well.