Animate Javascript classList.toggle

Question

최근에 CSS와 HTML을 배우기 시작했고 반응 형 탐색 바에 대한 this 튜토리얼을 발견했습니다.

javascript 함수 classList.toggle을 사용하여 모바일 버전의 navbar를 표시합니다. 이 애니메이션을 적용하고 전환을 추가 할 수있는 방법이 있습니까?

Answer 1

클래스 속성에는 애니메이션을 적용 할 수 없지만 CSS 속성에는 애니메이션을 적용 할 수 있습니다.

당신은 이것처럼, 당신의 .topnav 클래스에 대한 초기 CSS 정의가 있어야합니다이 코드, 언제든지 변경됩니다 .topnav 요소의 배경색에

.topnav { 
    background-color: black; /* Set an initial background */ 
    transition: background-color 200ms; /* Tell browser to use a transition when background-color changed */ 
} 

감사합니다, 전환이 발생합니다.

.topnav.responsive { 
    background-color: blue; 
} 

을 그리고 이것은 당신의 JS 코드로 작동합니다

당신은 예를 들어이 CSS를 추가 할 수 있습니다. 물론

, 내 예는 기본이며, 단지 배경 색의 전환을 추가 할 것이다, 그러나 당신의 문제 :