原生开发移动web单页面(step by step)7——页面切
2018-09-06 本文已影响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对象
