不需要 Npm 的单页应用框架:
视图切换动画,是指活动视图发生变化,从一个视图切换至另外一个视图的过程中展现给用户的动画效果。
我们来看两个例子:
动画1(点击体验)
动画2(点击体验)
开发者也可以选择不应用动画,效果如下图所示:
通过对比,我们可以清晰地观察到:动画点缀会使得视图切换生动许多。那么,我们该如何开发视图切换动画呢?
通常情况下,开发者需要按照如下流程完成视图切换动画的开发:
- 使用css,借助 animation、transition 等属性创建视图离开动画、视图进入动画
- 『有条件地』引用动画并确定动画播放时长
- 在页面就绪时调用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