0
최근에 CSS와 HTML을 배우기 시작했고 반응 형 탐색 바에 대한 this 튜토리얼을 발견했습니다.Animate Javascript classList.toggle
javascript 함수 classList.toggle을 사용하여 모바일 버전의 navbar를 표시합니다. 이 애니메이션을 적용하고 전환을 추가 할 수있는 방법이 있습니까?
최근에 CSS와 HTML을 배우기 시작했고 반응 형 탐색 바에 대한 this 튜토리얼을 발견했습니다.Animate Javascript classList.toggle
javascript 함수 classList.toggle을 사용하여 모바일 버전의 navbar를 표시합니다. 이 애니메이션을 적용하고 전환을 추가 할 수있는 방법이 있습니까?
클래스 속성에는 애니메이션을 적용 할 수 없지만 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를 추가 할 수 있습니다. 물론
, 내 예는 기본이며, 단지 배경 색의 전환을 추가 할 것이다, 그러나 당신의 문제 :
당신이 무엇을 달성하기 위해 만든 어떤 노력을 제공하기 위해 더 나은 대해 도움이 될 것입니다 당신은 .. [this] (https://jsfiddle.net/)을 확인하고 http://stackoverflow.com/help/asking을 읽고 사이트에 대해 더 많이 읽어보십시오. 그리고 w3schools의 지침을 따르므로 [this 전환 용] (http://www.w3schools.com/jsref/prop_style_transition.asp) ... 환영합니다 :) – mrapsogos