二十七、HTML5单页框架View.js介绍 - 视图切换动画

不需要 Npm 的单页应用框架：

View.js - http://view-js.com

---

视图切换动画，是指活动视图发生变化，从一个视图切换至另外一个视图的过程中展现给用户的动画效果。
我们来看两个例子：

动画1（点击体验）

动画2（点击体验）

开发者也可以选择不应用动画，效果如下图所示：

通过对比，我们可以清晰地观察到：动画点缀会使得视图切换生动许多。那么，我们该如何开发视图切换动画呢？

通常情况下，开发者需要按照如下流程完成视图切换动画的开发：

1. 使用css，借助 animation、transition 等属性创建视图离开动画、视图进入动画
2. 『有条件地』引用动画并确定动画播放时长
3. 在页面就绪时调用View.js提供的 View.setSwitchAnimation 方法，以设置动画的『播放触发器』

以下是动画2的源码（已在注释中详细描述各个步骤的执行）。

HTML

<!-- 视图1的DOM骨架 -->
<section id = "page1" data-view = "true" data-view-default = "true" >
	<header>
		<span class = "nav-back" data-view-rel = ":back"></span>
		Page 1
	</header>
	<h1>This is page 1.</h1>
	<div data-view-rel = "page2" class = "btn">Navigate to page 2.</div>
</section>

<!-- 视图2的DOM骨架 -->
<section id = "page2" data-view = "true">
	<header>
		<span class = "nav-back" data-view-rel = ":back"></span>
		Page 2
	</header>
	<h1>This is page 2.</h1>
	<div data-view-rel = "page3" class = "btn">Navigate to page 3.</div>
</section>

<!-- 视图3的DOM骨架 -->
<section id = "page3" data-view = "true">
	<header>
		<span class = "nav-back" data-view-rel = ":back"></span>
		Page 3
	</header>
	<h1>This is page 3.</h1>
	<div data-view-rel = ":default-view" class = "btn">Navigate to page 1.</div>
</section>

DOM骨架定义了视图的基本结构。开发视图骨架是使用View.js开发视图的第一要务。

CSS