FF3에서 작동하지 않는 CSS3 전환

일부 JavaScript가 포함 된 요소의 클래스 이름을 "활성"을 포함하도록 변경할 때마다 CSS3 전환이 h1 요소에서 트리거되도록 설정했습니다.FF3에서 작동하지 않는 CSS3 전환

이

#idname .classname.active h1 { 
    opacity: 1; 
    left: 0; 
    -webkit-transition : all 4s ease; 
    -moz-transition : all 4s ease; 
    -ms-transition  : all 4s ease; 
    -o-transition  : all 4s ease; 
    transition   : all 4s ease; 
}

이 웹킷 브라우저에서 아름답게 작동하지만, 파이어 폭스에서 실패한 것으로 나타납니다 :

#idname .classname h1 { 
    opacity: 0; 
    left: -1.25em; 
    z-index: 3; 
    position: relative; 
}

얹는 : 그래서 두 CSS 선언을 수행합니다. 내 의혹은 이것이 내가 틀릴 수도 있지만 클래스 이름 변경을 기반으로 트리거하는 방식과 관련이 있다는 것입니다. Firefox가 이것을 허용하지 않습니까? 누구든지 좋은 해결 방법을 가지고 있습니까? 당신이 제공 할 수있는 도움에 미리 감사드립니다.

출처

2012-04-27 calexical

난 그냥 위의 시도, 그리고 파이어 폭스에서 잘 작동하는 것 같습니다. 문제를 보여주는 완벽한 테스트 케이스를 게시 할 수 있습니까? –

-1

DOM에 무언가를 추가 한 다음 특정 클래스 이름을 추가하여 애니메이션을 트리거하는 사이에 약간의 지연이 추가되어 문제가 해결되었습니다. 20ms는 Firefox에서 작동하기에 충분했습니다.

출처

2012-08-26 02:23:58 cnanney

FF3에서 작동하지 않는 CSS3 전환

답변

관련 문제