페이지 로드될 때 잠깐 보이는 트랜지션 없애기

페이지 로드될 때 잠깐 보이는 트랜지션 없애는 방법입니다.

마우스 호버 등 CSS Transition이 있을 경우 잠깐이지만 페이지 로드될 때 트랜지션이 보입니다.
전체 웹사이트가 로드되는 경우 느끼지 못하지만 특수한 케이스의 경우 예를들어, 퍼블리실 실전 예제 html이 처음 로드될 때 트랜지션이 보여서 좀 보기가 안좋습니다. 이런 경우에 사용합니다.

반드시 필요한건 아니지만 알아두시면 나중에 필요한 경우에 사용하시면 됩니다.

HTML Part

CSS Part

/* CSS Transition Only After Onload */

.preload {

transition: none !important;

-webkit-transition: none !important;

-moz-transition: none !important;

-ms-transition: none !important;

-o-transition: none !important;

}

jQuery Part

$(window).load(function(){

$('body').removeClass('preload')

})