无码免费中文字幕视频,性中国videossexo另类,av便利店

在開始寫頁面切換效果前，首先要介紹一下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);
        }
    }
});

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——頁面切換動畫

原生開發移動web單頁面(step by step)7——頁面切換動畫

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

原生開發移動web單頁面(step by step)7——頁面切換動畫

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频