클래스 변경시 부트 스트랩 애니메이트 버튼 스타일

Question

.btn 버튼의 클래스를 변경할 때 배경에 애니메이션을 적용하고 싶습니다. 예를 들어, .btn-primary에서 .btn-success 또는 .btn- 위험. 내가 -webkit-전환을 추가하는 경우

은 지금 : 배경 1 초는 .btn 클래스에 선형 및 클래스를 전환 할 JS를 사용하여, 변화가

애니메이션되지 않는다 (포인트 관심 : 나는 CSS를 추가하는 시도 전환 요소는 크롬 요소 검사 도구에서만 사용 가능)

알아두기?

업데이트 : 버튼이 비활성화 모드 인 경우 전환이 작동합니다. 아마도 문제는 css3 그라디언트를 배경 이미지로 사용했기 때문일 수 있습니다.이 이미지는 -webkit-transition에서 지원하지 않을 수 있습니다.

Answer 1

나는 당신이 당신의 업데이트에서 그것을 찔렀다 고 생각합니다. CSS는 배경색과 위치를 전환 할 수 있지만 그래디언트간에 애니메이션을 적용하는 데는 필요하지 않습니다.

• 는
• 시작합니다 CSS3 키 프레임 애니메이션 만들기 "0 -20px"(반드시 -20px하지 않도록 배경 위치를 애니메이션으로, : 당신이 관심이 있다면

  여기에 필사적 해결 방법에 대한 생각 그래디언트가 흐려지기 때문에 배경색 만 볼 수 있습니다.)

• 그런 다음 배경색을 원하는 새 배경색에 맞 춥니 다.
• 배경색에 애니메이션을 적용 할 때, 그라디언트를 새 그라데이션으로 전환합니다. 네가 원해. 그라디언트가 보이지 않기 때문에 애니메이션에는 표시되지 않습니다.
• 마지막으로 배경색이 애니메이션으로 끝나면 배경 위치를 "0 0"으로 다시 애니메이션합니다.

이렇게 빨리 수행하면 적절한 효과를 낼 수 있습니다. 나는 당신이 그것을 시험해 보는 경우에 그것을 보는 것은 흥미 롭다.