• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

줌인이 왜 안되는지를 모르겠어요..

20.09.07 14:55 작성 조회수 139

1

(() => {
    const leaflet = document.querySelector(".leaflet");
    const pageElems = document.querySelectorAll(".page");
    let pageCount = 0;

    function getTarget(elem, className){ //부모노드까지 위임
        while(!elem.classList.contains(className)){
            elem = elem.parentNode;

            if(elem.nodeName =='BODY'){
                elem = null;
                return;
            }
        }
        return elem;
    }


    function closeLeaflet(){
        pageCount=0;
        document.body.classList.remove('leaflet-opened');
        pageElems[2].classList.remove('page-flipped');
        setTimeout(() => {
            pageElems[0].classList.remove('page-flipped');
        },500);
    }

    function zoomIn(elem){
        const rect = elem.getBoundingClientRect();
		const dx = window.innerWidth/2 - (rect.x + rect.width/2);
        const dy = window.innerHeight/2 - (rect.y + rect.height/2);
        let angle;
        switch(elem.parentNode.parentNode.parentNode.dataset.page*1){
            case 1:
                angle = -30;
                break;
            case 2:
                angle = 0;
                break;
            case 3:
                angle =30;
                break;
        }
        console.log(elem.parentNode.parentNode.parentNode.dataset.page);
        leaflet.style.transform = `translate3d(${dx}px, ${dy}px, 50vw) rotateY(${angle}deg)`;
    }

    leaflet.addEventListener('click',e =>{
        let pageElem = getTarget(e.target, 'page');
        if(pageElem){
            pageElem.classList.add('page-flipped');
            pageCount++;
            if(pageCount ==2){
                document.body.classList.add('leaflet-opened');
            }
        }

        let closeBtnElem = getTarget(e.target, 'close-btn');

        if(closeBtnElem){
            closeLeaflet();
        }
        
        let menuItemElem = getTarget(e.target, 'menu-item');
        if(menuItemElem){
            zoomIn(menuItemElem);
        }
    });
})();

답변 1

답변을 작성해보세요.

0

혹시 CSS leaflet 클래스에 애니메이션을 미리 넣으셨을까요?

.leaflet {
    ....
    ....
    animation: start-ani 1s forwards;
}

animation은 마지막 챕터에서 추가하는데, 완성파일에 있는 CSS를 미리 복사해 넣으셨으면 들어가있을 가능성이 있어서요. animation에서도 transform을 정의하는 부분이 있어서 충돌나는 부분이 생겨서 줌 동작이 안되고, 해당 파트에서 그걸 해결하는 내용이 함께 나옵니다.
일단 CSS에 animation이 들어가있다면 저 부분을 주석처리 해주세요.

만약 그 원인이 아니라면, css도 같이 올려주시면 봐드릴게요~
현재 작성중인 js는 특별히 문제가 안보입니다^^