오버플로 추가 이벤트가 발생할 때 FF에서 CSS 전환이 작동하지 않습니다.

오버 플로우 숨김 및 CSS 전환과 관련된 문제가 있습니다. 전환 애니메이션은 코드가 추가되어 <body> 요소의 overflow: hidden으로 설정 될 때까지 제대로 작동합니다. 이런 경우 전환 애니메이션이 작동하지 않습니다. 요소는 즉시 변경됩니다.오버플로 추가 이벤트가 발생할 때 FF에서 CSS 전환이 작동하지 않습니다.

봐이 예는, 제발 : 라인은 0 추가

$(document).ready(function() { 
    $('#toggle').on('click', function() { 
     $('#block').addClass('is-opened'); 
     $('body').css('overflow', 'hidden'); 
    }); 
});

그 경우 http://jsfiddle.net/Lg3q911b/2/

CSS :

#block { 
    background: red; 
    float: left; 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    width: 203px; 
    height: 100%; 
    transition: all 0.4s; 
    transform: translate3d(-203px, 0, 0) scale3d(1, 1, 1); 
} 

#block.is-opened { 
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 
}

HTML :

<div id="block"></div> 
<a href="#" id="toggle">Toggle</a>

jQuery를이 <body>으로 설정되면 애니메이션이 작동합니다.

어쩌면 누군가가 그것을 고치는 방법을 알고 있습니까?

출처

2014-09-04 inferus-vv

꽤 이상합니다. – Pointy

너는 이상하게도 너의 문제를 설명해야하고, 코드와 바이올린은 의미가 없다. – Benjamin

스타일 시트에'overflow' 규칙을 넣으면 (항상' '을'overflow : hidden'으로 설정한다) 작동하지만, 게시 된 코드가 작동하지 않는 이유를 모르십시오. – Pointy

이것은 다음 버전에서 이미 수정 된 버그입니다.

나는 파이어 폭스 박 (35)에, 그것은 잘 작동하지만

파이어 폭스 (32)를 사용하여 문제를 재현 할 수 있습니다.

출처

2014-09-04 13:31:30 Oriol

고뇌했습니다. 고치려고 노력했습니다.) 고마워요! –

오버플로 추가 이벤트가 발생할 때 FF에서 CSS 전환이 작동하지 않습니다.

답변

관련 문제