[JS] 버튼 클릭 ! CSS 애니메이션

우연히 버튼 인터랙션 디자인을 보다가 

클릭했을 때 지정한 시간동안 색이 변하게 설정해보고싶었다!

 

1.
결과 :

다른 버튼이 클릭되었을 때 중복되어 색이 변하는 이벤트가 발생하는 문제가 생겼다 ㅠㅠ 

처음에는 자바스크립트로 버튼 클릭 이벤트가 있을 때
이벤트 타겟에 classList.add()로 클래스를 추가하고,
미리 CSS에 해당 클래스의 스타일 요소를 시트의 마지막에 설정해둔 뒤 추가되었을 때 나타나게 해주었다.
그리고 setTimeout을 지정해 시간이 지나면 클래스가 삭제되도록 실행해봤다.

 

2.

결과 :

ㅠㅠ 시간차가 있어도 같은 버튼을 클릭하면 다른 버튼을 클릭하기 전까지 색이 변하지 않는다,,

클릭한 하나의 버튼만 배경색을 변경하고 싶었기 때문에 ..!

시간이 지나면 서서히 원래의 배경색으로 돌아가도록
CSS에서 @keyframe 애니메이션을 지정하고,
시간은 duration을 통해 설정해줬더니 이 부분은 원하는 대로 수정할 수 있었다 ㅎㅎㅎㅎ

그리고 자바스크립트에서는 
const item = document.querySelectorAll(".select-item")로 같은 클래스를 가진 버튼들을 가져온? 뒤
이벤트가 발생할 때 마다 item.forEach((el)=> el.classList.remove("highlight"))를 우선 실행시켜
이전에 추가된 클래스는 삭제하고 다시 추가할 수 있도록 했다!

 

repl.it

 

아무리 해도 안된다 ㅎㅎㅎㅎㅎㅎㅎ하ㅏ하