css transition으로 배경색 변화 문의

css transition으로 배경색 변화 문의

QA

css transition으로 배경색 변화 문의

답변 2

본문

안녕하세요.

현재 아래 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)
}

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1
© SIRSOFT
현재 페이지 제일 처음으로