페이지 전환(이동) 시 Transition effect 주기
- 구조
list 페이지
detail 페이지 2
list 페이지의 메뉴 클릭 시 각각의 detail 페이지로 이동하는데 이때 페이지 전환 시 transition 효과를 주고자 함.
메뉴에는 href로 detail 페이지를 지정해주었다.
function isSameAsLocation(uriString) {
const uri = new URL(uriString);
return (
uri.origin === window.location.origin &&
uri.pathname === window.location.pathname
);
}
function pageTransition(ulList) {
ulList.forEach((el) => {
if (!(el instanceof HTMLAnchorElement)) return;
const { href } = el;
if (!href || el.target === "_blank" || isSameAsLocation(href)) return;
el.addEventListener("click", (event) => {
event.preventDefault();
document.body.addEventListener(
"transitionend",
() => {
window.location.href = href;
},
{ passive: true, once: true }
);
document.body.classList.add("hidden");
});
});
}
pageTransition(docoment.querySelectorAll("a"));
document.body.classList.add("reveal");
메뉴의 href를 가지고 있는 a 태그를 클릭하면 함수가 작동하도록 설정하고 화면 전환 시 transition 효과를 주기 위해 body 태그에 hidden 클래스를 추가함.
css
body {
overflow: hidden;
opacity: 0;
transition: all .1s;
font-family: sans-serif;
}
body.reveal {
opacity: 1;
transform: translateX(0);
overflow-y: auto;
}
body.hidden {
opacity: 0;
transform: translateX(-20px);
}
페이지 전환 시 list 페이지에서 body 태그에 hidden 클래스가 추가되면서 이동함
Chrome에서 실행 시 아무 문제 없었는데 Safari에서 클릭 후 다시 뒤로가기 시 body에 추가된 hidden 클래스가 삭제되지 않아 기존의 컨텐츠가 아무것도 보이지 않았다.
다시 검색 시작!!!
* Back Forward Cache
브라우저의 뒤로가기 시 브라우저가 단일 세션 내에서 자바스크립트 상태 및 웹 페이지를 전체 캐싱함으로써 전체적인 응답속도를 빠르게 동작하기 위해 사용되는 캐시.
이 캐시는 페이지에 대한 추가적인 로딩을 하지 않고 자바스크립트까지 유지하고 있기 때문에 페이지 로딩 시 반드시 한번 호출되어야 하는 자바스크립트가 있다면 호출되지 않기 때문에 문제가 발생할 수 있다.
근데 이 방법은 리로드할 리소스들이 너무 많을 경우 사용하면 좋은 방법으로 그냥 뒤로가기 시 리로드 하거나 href 로 이동하도록 해도 상관없다는 내용도 있었다.
우선 확인한 내용 추가.
window.onpageshow = function(event) {
if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
// 사파리 or 안드로이드에서 뒤로가기로 넘어온 예시(캐시)
// Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우 이벤트
document.body.classList.remove("hidden");
}
}
onpageshow는 page 호출되면 캐시든 아니든 무조건 호출된다고 하며,
사파리의 경우 뒤로가기 하면 캐시를 이용해 화면을 보여주는데 이 때, event.persisted가 true임.
그 외의 브라우저는 window.performance && window.performance.navigation.type == 2 로 뒤로가기인지 체크가 가능하다고 함.
https://ifuwanna.tistory.com/63
'javascript' 카테고리의 다른 글
정규 표현식 Regex (0) | 2022.02.17 |
---|---|
아코디언 메뉴 (0) | 2022.02.17 |
ES6. 구조 분해 할당 (0) | 2022.02.07 |
String.prototype.trim() (0) | 2022.01.13 |
object.assign(target, sources) (0) | 2022.01.11 |