css3로 숨겨진 요소를 올바르게 표시합니다.

Question

모든 프로젝트에서이 문제가 발생합니다.이 시점에서 충분히 물어 보았습니다. 나는 때문에 얼마나 좋은 그것을 부드럽게의 일에 페이드 애니메이션에 대한 CSS3를 사용 꿔

는 fadeIn와 비교 등

문제는, 내가 뭔가 페이드있어 시간의 99 %가 . 처음 display:none; (단지 시작 opacity: 0에 그것을 가지고, 의미와 jQuery를이 충분하지 않습니다와 opacity: 1로 변경 예를 들어

, 내 드래그 및 드롭 기능으로 설정되어, 나는 절대 위치 DIV있다 : #dropzone, 분명히 전체 앱을 덮을 수는 없습니다 (단, 전체 시간 동안 0 불투명도로 설정 됨).

$('#dropzone').show().css('opacity',1)을 추가하려고하면 페이드가 발생하지 않습니다. 이 .show()을 완료하면

이, 그것은 여전히 ​​opacity 0로 설정되어 (나는 바로 거기를 중지하면, 아무것도 나타 없기 때문에 내가 아는 opacity: 0와 display:block로 설정합니다.) - 그것은 이미 transition 속성 거기에 적절한 CSS3를 가지고, 그렇다면 왜 .css()에 도달 할 때까지 움직이지 않을까요?

이것은 나에게 너무나 괴롭다. 나는 이것을 고치거나 적절한 방법을 알고 싶다.

감사

http://jsfiddle.net/fPtU5

편집 코드가 실제로 분명히 전환을 사용하여 플러그인없이 일을 실현 한 후,이 플러그인을 사용하여 작업 가지고 다음, 나는 조금을 시도

Answer 1

jsfiddle 추가 .

$('a').click(function(){ 
    $('div').show().animate({'opacity':1}); 
}); 

Answer 2

JSFiddle이 문서의 도움으로 그것을 알아 냈 : http://www.greywyvern.com/?post=337#

.dropzone { 
    visibility:hidden; 
    opacity:0; 
    background: rgba(0,0,0,.85); 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 9999; 
    -webkit-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
    -moz-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
    -ms-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
    -o-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
     transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
} 

.opaque { 
    visibility:visible; 
    opacity:1; 
    transition-delay:0s; 
} 

그리고 당신은/아웃 추가 페이드를 트리거 할 때 다음 /이 클래스를 제거

$('.dropzone').addClass('opaque');

Answer 3

I don ' 왜 디스플레이 속성이 CSS 애니메이션을 사용하는지 알지 못하지만, 여기에 원래의 바이올린에 대한 흥미로운 관찰/수정이 있습니다. http://jsfiddle.net/5RF5A/. 디스플레이를 차단하고 불투명도를 1로 설정하는 것 사이의 지연 ms조차도 css 애니메이션을 사용할 수 있습니다.

CSS를 사용하여 불투명도를 애니메이트하려고 할 때마다이 문제가 항상 발생하지만 문서 흐름에서 요소를 제거하려면 display:none이 필요합니다. 나는 일반적으로 위치를 추가합니다 : 절대 또는 높이/너비 : 0 또는 visibility : hidden (불투명도는 0) 대신 display : none을 사용하므로 불투명도를 계속 애니메이트 할 수 있습니다.

내 추측에 따르면 브라우저 리플 로우/다시 칠하기 일종의 브라우저 일까?방법이 꺼져 있지만 그게 내가 어디서부터 시작할까요?

편집 : 발견 Transitions on the display: property. 문제에 대한 아주 좋은 해답/통찰력을 가지고 있습니다.