美文网首页让前端飞原生开发移动单页面(step by step)JavaScript 进阶营
原生开发移动web单页面(step by step)7——页面切

原生开发移动web单页面(step by step)7——页面切

作者: 真五花肉 | 来源:发表于2018-09-06 19:27 被阅读24次

    在开始写页面切换效果前,首先要介绍一下css3的animation模块,在css中定义如下

    div.a {
        animation: bounce 0.25s forward;
    }
    

    css3的animation定义可以声明关键名,动画时间,动画插值方式,动画的延迟以及动画完毕后的状态以及动画次数。
    然后定义关键帧

    @keyframes bounce {
        0% {
            transform: translate(0, 20px);
        }
        100% {
            transform: translate(0, 100px);
        }
    }
    

    这样子,就用css3定义完了一个动画。

    然后通过js可以监听css3动画事件,然后控制动画,分别为animationstart, animationiteration animationend和animationcancel
    animationstart事件在动画开始的时候触发
    animationiteration事件在动画的时候每隔一段时间触发
    animationend事件在动画结束时触发
    animationcancel事件在动画未结束突然改变css导致的动画停止时触发。

    现在开始设计切换模型,如下图,图一为切换页面入场动画, 图二为出场动画。


    入场动画(图一)
    出场动画(图二)

    我们首先设置默认值,这里设置开始给全局body定义了一个app的类, 然后把改动的放置动态容器定义为app-change类, 预备的容器为app-back类, 在改变时,将动态容器和预备容器的类名为change-state类。
    图一中,动态容器changeDom加入缩小隐藏page-out类, 预备容器backDom加入左移覆盖page-in类。
    图二中,动态容器changeDom加入右移隐藏page-in-reverse类, 预备容器backDom加入放大覆盖page-out-reverse类。

    首先现在css文件夹中新增一个app.css文件, 然后全局定义默认类别的, 如下代码

    body.app {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
    }
    .app-change,
    .app-back {
        box-sizing: border-box;
        background: white;
    }
    .app-change {
        width: 100%;
        min-height: 100%;
    }
    .app-back {
        width: 100%;
        min-height: 100%;
        position: absolute;
        z-index: -1;
        transform: translate(100vw, 0);
        top: 0;
    }
    .change-state {
        overflow: hidden;
    }
    
    [data-action="page-in"],
    [data-action="page-in-reverse"] {
        position: absolute;
        box-sizing: border-box;
        background: white;
        animation: page-in .25s forwards;
    }
    [data-action="page-in-reverse"] {
        position: absolute;
        box-sizing: border-box;
        background: white;
        animation: page-in .10s forwards;
        top: 0px;
    }
    
    [data-action="page-in"] {
        z-index: 2;
    }
    [data-action="page-out-reverse"] {
        z-index: -1;
    }
    
    [data-action="page-in-reverse"] {
        animation: page-in-reverse .25s forwards;
    }
    
    [data-action="page-out"] {
        animation: page-out .1s forwards ease-out;
    }
    
    [data-action="page-out-reverse"] {
        animation: page-out-reverse .25s forwards ease-out;
    }
    @keyframes page-in {
        0% {
            transform: translate(100vw, 0);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
    @keyframes page-in-reverse {
        0% {
            transform: translate(0, 0);
            opacity: 1;
        }
        100% {
            transform: translate(100vw, 0);
            opacity: 0.5;
        }
    }
    
    @keyframes page-out {
        0% {
            opacity: 1;
            transform: scale(1, 1);
        }
        100% {
            opacity: 0.5;
            transform: scale(0.5, 0.5);
        }
    }
    
    @keyframes page-out-reverse {
        0% {
            opacity: 0.5;
            transform: scale(0.5, 0.5);
        }
        100% {
            opacity: 1;
            transform: scale(1, 1);
        }
    }
    

    然后修改app.js文件,修改app的构造函数, 增加默认动画,以及backDom和changeDom的容器

    function App(options) {
        options = options || {};
        App.extend(options, {
            appClass: "app",
            changeClass: "app-change",
            backClass: "app-back",
            changeState: "change-state",
            pageInReverse: "page-in-reverse",
            pageOutReverse: "page-out-reverse",
            pageIn: "page-in",
            pageOut: "page-out"
        });
        this.options = options;
        this.currentPage = null;
        this.staticPage = null;
        this.pageContainer = null;
        this.backDom = null;
        this.changeDom = null;
        this.routeObj = {};
    }
    

    修改initilaize的方法,这里面创建changeDom和backDom,放在布局页面中,然后将初始页放置backDom中

    initialize: function (staticPage, indexPage) {
        var options = this.options;
        staticPage = this.staticPage = staticPage || App.emptyPage;
        var that = this;
    
        staticPage.render(function (html) {
            var body = document.body;
            body.classList.add(options.appClass);
            body.insertAdjacentHTML("afterbegin", html);
            staticPage._initialize(body);
            if (staticPage.domList.pageContainer) {
                that.pageContainer = staticPage.domList.pageContainer;
            }
            else {
                console.error("staticPage must have pageContainer");
            }
            that._createOptionDom();
            that.render(indexPage, true);
    
            window.addEventListener("popstate", function (ev) {
                if (ev.state && ev.state.data) {
                    var url = ev.state.data;
                    var page = that.routeObj[url];
                    that._renderPage(page);
                }
            }, false);
        });
    },
    

    初始化中添加了_createOptionDom方法, 添加两个放置页面的容器。

    _createOptionDom: function () {
        var options = this.options;
        this.changeDom = document.createElement("div");
        this.changeDom.className = options.changeClass;
        this.backDom = document.createElement("div");
        this.backDom.className = "";
        this.pageContainer.appendChild(this.changeDom);
        this.pageContainer.appendChild(this.backDom);
    },
    

    修改_renderPage方法,将更改的Page实例对象放置在backDom中,然后调用_replaceDom()方法

    _renderPage: function (page) {
        if (this.currentPage) this.currentPage._dispose();
        this.currentPage = page;
        page.app = this;
        var that = this;
    
        document.title = page.title;
        var backDom = this.backDom;
        page.render(function (html) {
            backDom.innerHTML = html;
            that._replaceDom();
            page._initialize(backDom);
        });
    },
    

    接着开启动画,监听动画的事件, 在动画结束后和动画取消后取消动画事件的监听, 动画结束后调整布局, _replaceDom方法的代码如下

    _replaceDom: function () {
        var options = this.options;
        var that = this;
        this.backDom.className = options.backClass;
        var tempDom = this.backDom;
        this.backDom = this.changeDom;
        this.changeDom = tempDom;
        this.pageContainer.classList.add(options.changeState);
    
        if (this.isRenderBack) {
            this.backDom.dataset.action = options.pageInReverse;
            this.changeDom.dataset.action = options.pageOutReverse;
        }
        else {
            this.backDom.dataset.action = options.pageOut;
            this.changeDom.dataset.action = options.pageIn;
        }
        this.isRenderBack = false;
    
        var changeDom = this.changeDom;
        var changeHandler = function (ev) {
            changeDom.className = options.changeClass;
            changeDom.dataset.action = "";
            that.backDom.dataset.action = "";
            that.backDom.className = "";
            that.backDom.innerHTML = "";
            that.pageContainer.classList.remove("options.changeState");
            changeDom.removeEventListener("animationend", changeHandler, false);
            changeDom.removeEventListener("animationcancel", cancelHandler, false);
        }
        var cancelHandler = function (ev) {
            changeDom.removeEventListener("animationend", changeHandler, false);
            changeDom.removeEventListener("animationcancel", cancelHandler, false);
        }
        changeDom.addEventListener("animationend", changeHandler, false);
        changeDom.addEventListener("animationcancel", cancelHandler, false);
    }
    

    这时候调用render会默认图1所示的动画方式,新增renderBack方法, 让页面以图2的动画方式切换,如下代码

    renderBack: function (page, isBack) {
        this.isRenderBack = true;
        this.render(page, isBack);
    },
    

    定义完动画后,修改各个页面的切换页面代码,entry.js的代码如下

    var entryPage = App.createPage("entry", "/serve/entry",  {
        render: function (fn) {
            this.fetch("/public/serve/html/entry.html", function (text) {
                fn(text);
            });
        },
        getDomObj: function (dom) {
            this.attachDom(".btn-group", "btnGroup", dom)
                .attachDom(".index-container", "container", dom)
                .attachSlide("container", this.startFn, this.moveFn, this.endFn)
                .attachTap("btnGroup", this.tapHandler, false);
        },
        tapHandler: function (ev) {
            var target = ev.target;
            var action = target.dataset.action;
            switch (action) {
                case "register": 
                    app.renderBack(registerPage);
                    break;
                case "login": 
                    app.render(loginPage);
                    break;
            }
        },
        startFn: function (ev) {},
        moveFn: function (ev) {},
        endFn: function (ev) {
            var speed = 1000 * ev.deltaX / ev.elapsed;
            if (speed > 200) {
                app.renderBack(registerPage);
            }
            else if (speed < -200) {
                app.render(loginPage);
            }
        }
    });
    

    login.js的代码

    var loginPage = App.createPage("login", "/serve/login", {
        render: function (fn) {
            this.fetch("/public/serve/html/login.html", function (text) {
                fn(text);
            });
        },
        getDomObj: function (dom) {
            this.attachDom("[data-action='back']", "backBtn", dom)
                .attachDom(".login-form", "form", dom)
                .attachDom(".login-container", "container", dom)
                .attachSlide("container", this.startFn, this.moveFn, this.endFn)
                .attachTap("backBtn", this.tapBackHandler, false)
                .attachEvent("form", "submit", this.formSubmitHandler, false);
        },
        tapBackHandler: function (ev) {
            app.renderBack(entryPage);
        },
        formSubmitHandler: function (ev) {
            ev.preventDefault();
            var form = ev.target;
            var name = form.name.value;
            var password = form.password.value;
            app.render(goalPage);
        },
        startFn: function (ev) {},
        moveFn: function (ev) {},
        endFn: function (ev) {
            var speed = 1000 * ev.deltaX / ev.elapsed;
            if (speed > 200) {
                app.renderBack(entryPage);
            }
        }
    });
    

    regiseter的代码

        render: function (fn) {
            this.fetch("/public/serve/html/register.html", function (text) {
                fn(text);
            });
        },
        getDomObj: function (dom) {
            this.attachDom("[data-action='back']", "backBtn", dom)
                .attachDom(".register-form", "form", dom)
                .attachDom(".register-container", "container", dom)
                .attachSlide("container", this.startFn, this.moveFn, this.endFn)
                .attachTap("backBtn", this.tapBackHandler, false)
                .attachEvent("form", "submit", this.submitHandler, false);
        },
        tapBackHandler: function (ev) {
            app.render(entryPage);
        },
        submitHandler: function (ev) {
            ev.preventDefault();
            var form = ev.target;
            var name = form.name.value;
            var password = form.password.value;
            var agree = form.agree.checked;
            if (agree) {
                app.render(goalPage);
            }
        },
        startFn: function (ev) {},
        moveFn: function (ev) {},
        endFn: function (ev) {
            var speed = 1000 * ev.deltaX / ev.elapsed;
            if (speed < -200) {
                app.render(entryPage);
            }
        }
    });
    

    加入了页面切换功能后,感觉整个单页面突然高大上起来了, 通过滑动来切换页面,让web页面更像一个真正的原生app。

    总结: 这里使用了css3的animation来做动画效果, 通过切换类来改变切换效果。这里也可以改变App构造函数的options,来改变符合自己的风格切换效果。 这里只是对css3的animation的初步尝试,还有非常的应用可供挖掘。虽然看起来不错,当时点击浏览器自带的前进后退(或者调用原生的history.back()和history.forward())的时候, 发现动画不统一了, 下一篇将解决这个问题。

    后续更新:下一篇就是为了解决原生后退前进导致动画不统一的问题,将引入新的History对象, 让它与浏览器的history记录一一对应,然后判断选择对应的切换效果。

    请用移动设备打开该案例
    案例链接


    原生开发移动web单页面(step by step)1——传统页面的开发
    原生开发移动web单页面(step by step)2——Page对象
    原生开发移动web单页面(step by step)3——App对象
    原生开发移动web单页面(step by step)4——tap事件与slide事件
    原生开发移动web单页面(step by step)5——nodejs服务器的搭建
    原生开发移动web单页面(step by step)6——history api应用
    原生开发移动web单页面(step by step)8——History对象

    相关文章

      网友评论

        本文标题:原生开发移动web单页面(step by step)7——页面切

        本文链接:https://www.haomeiwen.com/subject/lnxfgftx.html