svg 로딩 애니메이션 효과 적용하기
body tag에 before-load 클래스가 ‘기본적으로’ 문서 로딩 전까지 붙어있다가 문서가 로딩되고나면 제거하는 방식으로 한다.
.loading {
opacity: 0;
}
.before-load .loading {
opacity: 1;
}
그런데 이렇게만 하면 opacity는 0이 될지 몰라도 해당 영역은 사라지지 않았다.
때문에 이 영역 밑에 깔려있는 영역을 클릭할 수 없다.
opacity가 0이된 후에 이 요소도 제거해줘야된다.
window.addEventListener('load', () => {
document.body.classList.remove('before-load');
document.body.removeChild(document.querySelector('.loading'));
})
위와 같이 .loading 요소를 바로 없애면 fadeOut 효과가 안나타난다.
transitionEnd 이벤트를 활용한다.
window.addEventListener('load', () => {
document.body.classList.remove('before-load');
document.querySelector('.loading').addEventListener('transitionEnd', function (e) {
document.body.removeChild(document.querySelector(this));
})
})
또는
window.addEventListener('load', () => {
document.body.classList.remove('before-load');
document.querySelector('.loading').addEventListener('transitionEnd', (e) => {
document.body.removeChild(document.querySelector(e.currentTarget));
})
})
화살표 함수는 this를 사용 못한다.
화살표 함수 안에서의 this는 콜백함수를 발생시킨 객체가 아니라 그 밖의 객체를 가리킨다.