fadeOut에 대해 'display none'을 스왑합니다.

Question

어떻게 페이드 아웃되고 제거되는지 어떻게 수정합니까?

<script> 
close = document.getElementById("close"); 
close.addEventListener('click', function() { 
    preloader = document.getElementById("preloader"); 
    preloader.style.display = 'none';  <--- this part, obviously 
}, false); 
</script> 

클릭하면 "표시 : 없음"이 너무 심하게 들리거나 부 드럽습니다. 감사!

Answer 1

, 당신이해야 할 CSS-전환을 사용할 수는 것을 지원해야하는 브라우저에 따라 달라집니다 :

.fadeOut{ 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-out; 
    -moz-transition: opacity .5s ease-out; 
    -o-transition: opacity .5s ease-out; 
    transition: opacity .5s ease-out; 
} 

는 그냥 .fadeOut 추가 - 전환에 대한 자세한 내용은 요소에 클래스를,을 참조하십시오 MDN article. 호환되는 브라우저 목록은 caniuse.com

에서 확인할 수 있습니다. 그 외, jQuery와 같은 라이브러리에는 JavaScript를 사용하여 구현되었으며 모든 주요 브라우저와 호환되는 fadeIn/fadeOut - effects가 내장되어 있습니다. (jQuery APi -> fadeOut)

jQuery없이이 작업을 수행하려는 경우 소스 코드에서 직접 구현 한 방법을 확인할 수 있습니다. jsapi.info은 사용 된 내부 함수를 링크하는 멋진 코드 브라우저이므로 호출되는 요소와 호출 된 함수의 모양을 빠르게 볼 수있는 기회를 제공합니다.

는 편집 : Fade In Fade Out in pure JavaScript