用Angular制作单页应用视图切换动画
视图,动画
单页应用(Single Page Web Application)往往有一个基本的要点,那就是把多个视图集成到一个网页内,然后去控制这些视图的显示和隐藏。此外,视图的切换动作几乎都会引入动画效果,以获得更平滑、流畅的浏览体验。
如果想要很快速地制作出包含视图动画的单页应用?
Angular会是一个不错的选择。下面,本文将说明如何用Angular(v1.4.3)来完成制作。你也许会觉得这个过程相当简单。
切换DOM的ngSwitch
视图切换,其实就是切换DOM显示。Angular有一个ngSwtich,从名字就可以看出,正是拿来做“切换”工作的。
参考Angular的ngSwitch用法,可以想到这样的html:
<body ng-app="morin" ng-strict-di>
<div class="view-container" ng-controller="viewController as view" ng-switch="view.current"><div class="view-page view-1" ng-switch-when="1"></div><div class="view-page view-2" ng-switch-when="2"></div>
</div>
<!-- scripts -->
</body>
在这段代码中,div.view-page
分别代表不同的视图,它们都被包含在div.view-container
这样一个视图容器中。视图容器元素上创建了名为viewController
的Controller,并定义了关联名view
(或者叫简称)。
视图容器上的ng-switch
,指定了一个变量view.current
,用来判断当前显示哪个视图。对应的,在已有的两个视图内,分别用ng-swtich-when
指定了1
和2
这样的值。想一想JavaScript的switch语句,这个结构会是怎样的效果,就很好理解了。
这些视图对应的css是:
.view-page{position: absolute;width: 100%;height: 100%;left: 0;top: 0;
}
.view-1{background: #b3c589;
}
.view-2{background: #8fc241;
}
这里的background
是给每个视图带上背景,用作标识。
引入动画的ngAnimate
ngAnimate是Angular的一个附属module,可以为Angular应用增加动画支持。在加入ngAnimate后,ngSwitch的切换过程所涉及的两个元素,会分别被Angular添加不同的class。其中,ng-enter
代表进场,ng-enter-active
代表进场动画终点,ng-leave
代表退场,ng-leave-active
代表退场动画终点。只需要借助这些class,我们就可以用css创建切换过程的动画(浏览器私有前缀已省略):
.view-page.ng-enter{transition: transform .5s;transform: translateX(100%);
}
.view-page.ng-enter.ng-enter-active{transform: translateX(0);
}
.view-page.ng-leave{transition: transform .5s;
}
.view-page.ng-leave.ng-leave-active{transform: translateX(-100%);
}
这段代码是一个使用transition
制作了简单的平移动画的例子。其中每一段定义都有的.view-page
,是为了限定只有视图元素才获得这个动画效果。
transition
动画的要点是,transition
属性本身必须定义在ng-enter
或ng-leave
这样表示动画起点的class上。然后,动画终点class上再定义终点样式。
如果使用animation
的css动画,则只需要用到动画起点的class:
.view-page.ng-enter{animation: moveFromRight .5s both;
}
.view-page.ng-leave{animation: moveToLeft .5s both;
}
@keyframes moveFromRight{from { transform: translateX(100%); }
}
@keyframes moveToLeft{to { transform: translateX(-100%); }
}
这段使用animation
的代码将可以获得和前面相同的动画效果。
如果想要视图1和视图2各自有不同的进场和退场动画,用class去限定即可:
.view-1.ng-enter{ }
.view-2.ng-enter{ }
/* ... */
有关更多的视图切换动画,推荐参考A Collection of Page Transitions。
让一切工作起来
下面加入JavaScript完成功能。代码是(外层包装函数已省略):
angular.module("morin", ["ngAnimate"]).controller("viewController", viewController);function viewController(){var view = this;view.current = "1";// Here, change "view.current" to switch views with animation.
}
没错,只需要这样一小段。然后,在viewController
函数的代码范围内,只要更改view.current
这一个变量的值,就可以完成带动画效果的视图切换。
很方便?现在,视图1内有一个按钮元素,我们希望它点击后切换到视图2,那么这样做就搞定了:
<a class="m-btn" href="javascript:" ng-click="view.current='2'"></a>
如果除了切换,还要做点别的,一般这样做:
<a class="m-btn" href="javascript:" ng-click="view.doSomething()"></a>
对应JavaScript:
function viewController(){// ... (the same as before)view.doSomething = doSomething;function doSomething(){// Do what you want.view.current = "2";}
}
至此,带有视图切换动画的单页应用就完成了。完成后的效果可能像这样(点击切换,限支持的浏览器):
http://runjs.cn/detail/ntrenbml
它包括4个视图,每个视图都定义了不同的进场和退场动画。
补充说明
ngSwitch的判定值是字符串
使用ngSwitch需要注意的是,最初在html内用ng-switch-when
指定的值,只会被当做字符串进行识别。所以你也可以看到前文中的代码使用的是字符串的"1"
。
ngSwitch会移除DOM
ngSwtich切换DOM显示并不通过css的display
属性实现,而是真正从DOM中添加和移除元素。因此,如果视图元素中有子Controller,使用$scope.$emit()
可以发布事件到上层,如viewController的$scope
,但反过来,viewController使用$scope.$broadcast()
向下发布事件,则可能会因为DOM当前不存在而接收不到。
保障初始状态的ngCloak
JavaScript代码一般都会放在比较靠后的位置执行,在代码未运行完毕之前,可能会出现先看到未经JavaScript处理的html的情况(并带来一种闪烁的感觉)。比如本文例子中,ngSwitch中的多个视图初始都是显示的,只是在JavaScript代码运行后才隐藏非当前视图。
Angular提供了ngCloak
来解决这个问题。在本文例子中,可以在div.view-container
上添加自定义属性ng-cloak
,并在页面css内补充这样的样式:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {display: none !important;
}
也就是说,先隐藏,然后Angular会在加载完成后再移除ngCloak
标记。
浏览器兼容性
考虑Angular(v1.4.x)本身以及css动画的兼容性,需要IE10+及其他现代浏览器。如果是移动端应用,那么在当前主流手机浏览器上都是可用的。
等下,还完全不会Angular...
本文假定你已经了解了最基本的Angular用法。如果想要从零开始,推荐参考AngularJS for Absolute Beginners和AngularJS TodoMVC Example。
结语
说起来,我也赞同一个观点是,Angular的学习成本不低。但就本文的例子来看,要制作这样一个像模像样的单页应用,是不是还挺简单的呢?对Angular有基本的了解就可以了。
当然,本文才不是说因为一个功能点的实现,就应该去引入Angular这样的框架。请理解为,如果用Angular开发单页应用,至少它的视图切换动画会很容易做!
(重新编辑自我的博客,原文地址:http://acgtofe.com/posts/2015/08/view-transitions-with-angularjs)
用Angular制作单页应用视图切换动画相关推荐
- discuzX1.5制作单页教程
首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:host.php.host.htm 本帖隐藏的内容 单页的php文件内容如下: 1. <?php 2. 3. ...
- Vue+Echarts制作单页面的XMR矿池监控台
练手用的,数据源是从矿池官网拿的json,页面源代码存个档 <!DOCTYPE html> <html lang="en"><head>< ...
- 常用16种视图切换动画
2019独角兽企业重金招聘Python工程师标准>>> 实现各种页面过渡切换效果.前4种是UIView,后面都是 Core Animation. 下面8种是传说中的私有API(作者测 ...
- ios 视图切换动画效果
http://wangjun.easymorse.com/?p=1147 在ios view与view间切换的动画效果这篇文章中简单介绍了一种动画效果,下面我详细介绍一下ios中页面间跳转系统自带的动 ...
- Angular单页应用网站SEO优化实例详解
基于个人爱好,使用Angular做了一个双语阅读的网站:蜗牛阅读, 用来闲暇时间看看英文的.可惜传了几本书到现在自己都还没看完~ 网站后台采用的是Netcore+Mysql,前端页面使用的是Angul ...
- HTML5 单页应用/框架 - View.js介绍
单页应用框架: View.js - http://view-js.com 什么是单页应用 单页应用,是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用. 换句话来讲,用户视觉效果,与技术实现的 ...
- 移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- 关于单页应用(SPA)的经验之谈
时下SPA单页应用如火如荼,对前端乃至后端开发都带来不小的冲击和变革.笔者整理了下笔记,决定写一下以前基于iframe做单页博客的一些经验方法. 对于单页应用,笔者没有找到最官方的定义.在笔者看来,在 ...
- 五、HTML5单页框架View.js介绍 - View.js的比较优势
不需要 Npm 的单页应用框架: View.js - http://view-js.com "比较优势",是经济学的术语,是指生产者可以使用更低的机会成本生产产品或提供服务的的优势 ...
最新文章
- 企业如何突破增长瓶颈?
- 阿里云 OAM 入选「2020中国技术力量年度榜单」,定义云原生应用交付标准
- 解析Vue.js中的computed工作原理
- DNN:LSTM的前向计算和参数训练
- (蓝桥杯)2018JAVA B组 日志分析
- oracle取差值集合
- 方幂序列 c+~+_C ++编程中的Trigraph序列
- 运行mvc项目报错 %@ Application Codebehind=Global.asax.cs Inherits=NHAPPAPI.MvcApplication Language=C...
- 九度OJ 1037:Powerful Calculator(强大的计算器) (大整数运算)
- iocp三层架构服务器模型
- mysql触发器联机删除_mysql触发器删除实例1
- 如何区别文本是BIG5还是GB
- 【冷冻电镜入门】加州理工公开课课程笔记 Part 3: Image Formation
- linux添加mx记录,linux下nslookup操作实例,查找域名的a记录、mx记录、cname记录、ns记录...
- 爬虫加密算法实践(淘宝直播+百度指数)
- 商品浏览时的css,jquery仿京东商品放大浏览页面
- androidframework面试,35岁程序员的人生感悟
- 美团点评女技术总监任登君:不要给自己的人生设限
- OpenStack Placement部署(5)
- 数据结构--链栈的c语言实现(超详细注释/实验报告)
热门文章
- 现代ups电源及电路图集_不间断电源维修,服务靠谱
- mysql ignore用法_php – 在某些条件下在一列上使用MySQL IGNORE
- mysql的槽_Mysql槽点 - MySQL及其它开源数据库 - ITPUB论坛-中国专业的IT技术社区...
- 阿里云rds mysql 并发_干货 | 浅析RDS MySQL 8.0语句级并发控制-阿里云开发者社区
- 简述python3默认使用的编码标准_Python3.X默认使用的编码是
- lol手游账号被移至美洲服务器,LOL手游“行窃预兆”遭玩家嫌弃,移除偷钱后成最鸡肋符文?...
- 点击查询后在表格中获取控件的值
- 加密芯片——3DES算法特点与应用注意事项
- VB中使用MD5算法
- 选课中应用Redis一些思考