JavaScriptからCSSトランジションエフェクトを再生する方法

Question

ユーザーが画面上のボタンをクリックしたときにサウンドを再生しようとしています。私はこれらのボタンをキーボードのキーで縛っています。同様に、キーボードキー 'A'にバインドされたid = 'A'のボタンがあります。したがって、ユーザがキーボードからキー「A」を押すかオンスクリーンボタンを押すと、そのボタンに書かれたJavaスクリプト機能が呼び出されます。ここで

は問題です：

私は、画面上のボタンをクリックすると、正常に動作され、ボタンのCSSの下に適用されています。所望のリップル効果が表示されます。しかし、キーボードのボタンを押すと、効果が働きません。

キーをバインドするには、次のJSコードを記述します。

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>

だから、どのように私は、ユーザーがキーボードのキーを押した場合にも波及効果を示すことができますか？

Answer 1

:activeを単独で使用することはできません.Javascriptがその状態をトリガーすることができないためです。代わりに、クラス.activeを追加して要素に配置します。

.button.active:after { ... } 

それは一種の話題に触れたので、global accesskey attributeは同様にあなたのためにも面白いかもしれませんTriggering CSS :active selector for non-anchor elements

を参照してください。