자바 스크립트에서 CSS 전환 효과를 재생하는 방법

Question

사용자가 화면의 버튼을 클릭 할 때 소리를 재생하려고합니다. 나는이 버튼들을 키보드 키들로 묶었습니다. 마찬가지로 키보드 키 'A'에 바인딩 된 id = 'A'가있는 버튼이 있습니다. 따라서 사용자가 키보드에서 'A'키를 누르거나 화면 버튼을 누르면 해당 버튼에 기록 된 자바 스크립트 기능이 호출됩니다.

I 버튼에 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을 혼자 사용할 수없는 것 같습니다. 대신 클래스 .active을 추가하여 요소에 추가하십시오. 이 종류의 주제를 접촉하기 때문에

.button.active:after { ... } 

는 Triggering CSS :active selector for non-anchor elements

를 참조 global accesskey attribute뿐만 아니라 당신을 위해 재미있을 수 있습니다.