css transition으로 배경색 변화 문의
본문
안녕하세요.
현재 아래 test는 배경색이 흰색입니다.
<span id="test" class="form-control"></span>
어떤 조건에 맞지 않을 때 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)
}
test 가 document.getElementById('test') id 인가봐요
#test.highlight {