웹 사이트 용으로 다소 복잡한 메뉴를 만들었습니다. 메뉴는 CSS3를 기반으로하는 거대한 양의 애니메이션에서 생생합니다. 그러나 다른 페이지로 이동하면 메뉴는 처음에는 모든 애니메이션없이 빌드되지만 JS는 현명하고 서버 측은 수행하지 않아야합니다.요소가 만들어지는 동안 일시적으로 모든 CSS3 전환/애니메이션을 끌 수 있습니까?
이제 메뉴가 빌드 될 때까지 모든 전환/애니메이션을 일시적으로 완전히 비활성화 할 수 있는지 궁금합니다.
애니메이션을 재정의하는 하위 클래스를 만들려고했지만 작동하지 않는 것처럼 보입니다. 사용되는 기본 클래스에서 정의 된 애니메이션/전환이 항상 그렇기 때문에?
메뉴가 작성된 후에 JavaScript로 추가 된 클래스를 통해 애니메이션/전환을 적용하는 것이 좋습니다.
애니메이션을 일시 중지 할 수 있지만 Safari 5 및 Chrome 4 (다른 애니메이션 속성의 경우 Safari 4 및 Chrome 2와 반대)에만 표시 (접두사)되는 속성이 있습니다. 그것은 당신의 목적을 위해 일할 것입니다.
나는이 느낌이 당신이 절대적으로 옳다. 그리고 나는이 2.500 줄을 쓰기 전에 이것을 생각하지 않은 놀라운 기쁨을 느낍니다. 나는 여전히 쉬운 솔루션을 꿈꿉니다. – SquareCat
나는 당신이 무슨 뜻인지 안다. 더 쉬운 지 확신하지 못합니다. 메뉴가 생성되기 시작하면 JavaScript를 통해 해당 클래스를 제거하고 완료 후에 다시 추가 할 수 있습니다. (애니메이션과는 달리 클래스에 다른 스타일이있는 경우에도 그 스타일을 잃어 버릴 수 있습니다.) –
예, 그게 중요한 부분입니다. 그것은 꽤 복잡합니다. 일반적으로 신비는 무엇인가? 새로운 클래스로 전환/애니메이션을 설정하여 이전에 정의 된 것을 대체 할 수없는 이유입니다. 만약 가능하다면, 예를 들어 "페이드"트랜지션은 "나타나는"트랜지션과 다르게 타이밍 될 수 있습니다 (불투명도 0-1에서 설정하고 리버스 할 때) – SquareCat
메뉴를 작성하는 동안 transition-duration을 0s으로 설정 한 다음 나중에 메뉴를 원하는 값으로 다시 설정할 수 있습니다.
잠재적으로 관련성이 있음 : http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily –