如何從javascript中彈出css轉換效果

我試圖在用戶單擊屏幕上的按鈕時播放聲音。我用鍵盤鍵來綁定這些按鈕。就像有一個id ='A'的按鈕綁定到鍵盤鍵'A'。因此，如果用戶從鍵盤按下鍵'A'或按下屏幕上的按鈕，將調用寫在該按鈕上的Java腳本功能。如何從javascript中彈出css轉換效果

這裏的問題是：

我已經申請以下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>

那麼我怎樣才能顯示，即使用戶按下鍵盤按鍵的連鎖反應？

來源

2016-09-25 Abhishek Hingorani

那麼現在你的問題解決了嗎？你沒有進一步評論，也沒有標記答案是正確的。 – connexo

看來你不能單獨使用:active因爲Javascript無法觸發該狀態。相反，創建一個類.active並將其放在元素上。

.button.active:after { ... }

見Triggering CSS :active selector for non-anchor elements

由於它種觸及話題，global accesskey attribute可能對你也很有趣。

來源

2016-09-25 08:33:14 connexo

謝謝@connexo的回覆。我很新的HTML和CSS。我試着做你說的這樣的話：.button.active:after { padding: 0; margin: 0; opacity: 1; transition: 0s }。但通過這樣做，按鈕的CSS完全消失。請告訴我我做錯了什麼。再次感謝您的努力 –

您需要基於'：focus'和'：blur'狀態添加/刪除'.active'類，或者根據點擊/關鍵事件來添加/刪除。 – connexo

如何從javascript中彈出css轉換效果

回答

相關問題