在开始写页面切换效果前，首先要介绍一下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记录一一对应，然后判断选择对应的切换效果。
作者：真五花肉
链接：https://www.jianshu.com/p/06915c0eae40
随时随地看视频
