手机开发 html5页面切换,原生开发移动web单页面(step by step)7——页面切换动画

在开始写页面切换效果前，首先要介绍一下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记录一一对应，然后判断选择对应的切换效果。

请用移动设备打开该案例

案例链接