二十七、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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值