하이브리드앱 페이지 전환 모션 만들기

    <!-- 앱 바디 -->
    <div class="app-body">
	
	<!-- 헤더 -->
	<header></header>
	<!-- //헤더 -->
	
		<!-- 하나의 페이지 -->
        <div id="PageHome" class="app-page" style="left:0;display:block;"></div>
		<!-- //하나의 페이지 -->
		
	<!-- 헤더 -->
	<footer></footer>
	<!-- //헤더 -->
		
	</div>
	<!-- //앱 바디 -->

/* 앱바디 */
.app-body { position: relative; width: 100%; margin: 0 auto; height: 100vh; background-color: #2f2f2f; }


/* 앱 페이지 */
.app-page { position: absolute; display: none; left: -100%; top: 0; width: 100%; }

var proc = true;
var pageInfo = {
            Status: "PageHome",
            Previous: "",
            Speed: 300
            };
	
	
	
        function fnPageMotion(targetID, navPos) {
            console.log(targetID);
            if (document.getElementById(targetID) !== null) {
                if (pageInfo.Status !== targetID) {
                    if (proc) {
                        proc = false;
                        let PreviousPage = $("#" + pageInfo.Status);
                        let NextPage = $("#" + targetID);
                        NextPage.css({ "display": "block", "left": screen.width }).promise().done(function () {
                            PreviousPage.animate({ "left": "-100%" }, pageInfo.Speed, function () {
                                pageInfo.Previous = PreviousPage.attr("id");
                                PreviousPage.css({ "left": "100%", "display": "none" });
                            });

                            NextPage.animate({ "left": "0" }, pageInfo.Speed, function () {
                                allnavErase();
                                $("#" + navPos).addClass("active");
                                pageInfo.Status = targetID;
                                proc = true;

                            });
                        });
                    }
                }
            }
        }