페이지 전환 효과

페이지 전환(이동) 시 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://marshallku.com/web/tips/%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%84%ED%99%98-%ED%9A%A8%EA%B3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

페이지 전환 효과 사용하기

https://ifuwanna.tistory.com/63

아이폰 브라우저 뒤로가기시 스크립트 리로드 오류 처리( onpageshow / BFCache )