css transition으로 배경색 변화 문의 채택완료
안녕하세요.
현재 아래 test는 배경색이 흰색입니다.
어떤 조건에 맞지 않을 때 test의 배경색을 빨간색으로 변경했다가 바로 다시 흰색으로 서서히 변하게 하려고 합니다.
그래서 다음과 같이 해봤는데 아무리 해도 안 되네요. 그냥 현재 흰색에서 빨간색으로 서서히 변하는 것밖에 안 되요.
document.getElementById('test').style.backgroundColor = "red"; document.getElementById('test').classList.add('highlight');
.test.highlight { background-color: #fff; transition: background-color 0.5s ease-in-out; }
그냥 봐서는 될 것 같은데....
조언 부탁드립니다.
답변 2개
.test.highlight { background-color: #fff; transition: background-color 0.5s ease-in-out; }
이거 자체가 잘못되었습니다. getElememtById <- 요거는 test라는 ID를 찾는건데 CSS에 .으로 표시가 되었네요
#test { background-color: #fff; transition-duration: 0.5s; }
#test.highlight { background-color: red; }
이렇게 바꾸시고
if(조건문) { document.getElementById('test').classList.add('highlight'); setTimeout(function(){ document.getElementById('test').classList.remove('highlight'); },100) }
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인