js에서 CSS 속성을 변경하면 CSS 애니메이션이 깨집니다.

Question

호버 효과가있는 버튼이 있습니다 (색상 변경).

button { 
    width: 180px; 
    height: 80px; 
    background-color: #A0522D; 
} 

button:hover { 
    background-color: #CD853F; 
} 

그런 다음 js에서 배경색을 변경하고 싶습니다. 예를 들어 선택된 버튼이 올바른 경우입니다. 애니메이션

buttons[i].style.backgroundColor = "#A0522D"; 

나는 또한이 전환 속성 : 그건 내가 생각 해낸 것입니다 내가 처음으로 배경 색상을 변경할 때마다, 완전히 가져가 애니메이션을 제거 것으로 보인다

button { 
    transition: background 0.5s ease, color 0.2s ease; 
} 

. 그것은 배경 색상이 아닌 글꼴 색상을 변경할 때의 경우가 아닙니다.

는 어떻게 가져가 애니메이션과 동시에 작업 JS 애니메이션 변경 BGCOLOR 모두가 어떤 생각을 가지고 있습니까? 아니면 단추를 움직이는 내 접근 방식이 맞지 않을 수 있습니까?

Answer 1

에 사용 당신은 자바 스크립트와 클래스를 변경할 수 있습니다. 다음

$('#yourElem').click(function(){ 

    $(this).toggleClass('on') 

}) 

및이 두 클릭에 전환됩니다 CSS를

#yourElem { background-color:red; transition: background-color 500ms ease; } 

#yourElem.on { background-color:blue; } 

와 모든 전환을 관리 할 수 ​​있습니다. 당신이 밖으로 그나마 당신이 모두를 할 수있는 새로운 변화와 호버 요소를 지정 그런 다음 너무 오래

.

#yourElem { color:black; background-color:red; transition: background-color 500ms ease, color 500ms ease; } 

#yourElem:hover { color:pink; } 

#yourElem.on {color:white; background-color:blue; } 

Answer 2

이것은 CSS 규칙의 특수성과 관련이 있습니다. 요소에 설정된 규칙 (예 : style 속성 설정)은 !important을 사용하지 않는 한 CSS 파일/스타일 블록에서 선언 한 규칙보다 높은 특이성을 갖습니다.

buttons[i].className = "myClass"; 

을이 StackOverflow answer는 CSS 클래스를 설정하는 방법에 대한 좋은 설명이 있습니다

더 나은 방법은 배경 속성을 설정하는 클래스를 사용하는 직접 스타일을 설정하는 대신 요소들을 변경하는 것 자바 스크립트. CSS 특이성에 대한 자세한 내용은 this article에서 확인할 수 있습니다.

Answer 3

jquery를 사용하면 도움이 될만한 CSS를 변경할 수 있습니까? 호버 및 JQuery와 색상 라이브러리 https://github.com/jquery/jquery-color

$('node').animate({ backgroundColor: "#f6f6f6" }, 'fast');