css transition으로 배경색 변화 문의

css transition으로 배경색 변화 문의

QA

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)
}

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT