Angular 全局页面切换动画 me-pageloading - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做成一个angular module, 方便以后添加类似效果时, 直接使用.
做好的demo效果
配合 angular-ui-router使用, 效果
配合 angular-route使用, 效果
目前整个模块可以零配置工作, 但是由于angular-route的实现机制, $routeChangeSuccess在页面初始化后会触发两次, 因此会造成页面直接进入后就会触发一次效果. 这个问题可以通过禁用me-pageloading的自动加载解决.
在angular-ui-router中没有此问题.
喔，漂亮！
好东西, 果断支持哈
没看到什么效果啊。。。
我觉得动画本身就加载页面似乎更好些…动画完了还要出现相亲相爱的两个小球等待有点浪费呢…
如果页面切换是需要先到server取数据呢?
如果不加两个小球的话, 整个页面就像白了一样, 加两个小球是为了告诉用户, 当前正在加载东西.
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画，咋也不能落伍，在此这梳理下动画知识吧，便于后面用到。接下来介绍下Animation动画的定义和调用，在介绍Animation之前需要了解下Keyframes，英文意思就是关键
现在经常会看到一些门户网站的专题使用到CSS3的动画，咋也不能落伍，在此这梳理下动画知识吧，便于后面用到。接下来介绍下Animation动画的定义和调用，在介绍Animation之前需要了解下Keyframes，英文意思就是关键帧，它相当于我们flash里面的帧。
Keyframes具有其自己的语法规则，他的命名是由&@keyframes&开头，后面紧接着是这个&动画的名称&加上一对花括号&{}&，括号中就是一些不同时间段样式 规则，有点像我们css的样式写法一样。对于一个&@keyframes&中的样式规则是由多个百分比构成的，如&0%&到&100%&之间，我们可以在 这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素 颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用&fromt&&to&来代表一个动画是从哪开始，到哪结束，也就是说这个 &from&就相当于&0%&而&to&相当于&100%&,值得一说的是，其中&0%&不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百 分符号（&%&）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。
Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。其具体语法规则如下：
&keyframes-rule:&'@keyframes'&IDENT&'{'&keyframes-blocks&'}';
&keyframes-blocks:&[&keyframe-selectors&block&]*&;
&keyframe-selectors:&[&'from'&|&'to'&|&PERCENTAGE&]&[&','&[&'from'&|&'to'&|&PERCENTAGE&]&]*;
none:表示不进么变换；&transform-function&表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一 个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗 号（&，&）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放 和移动元素 ，他有几个属性值参数：matrix。下面我们分别来介绍这几个属性值参数的具体使用方法：
我把上面的语法综合起来
&&@keyframes&IDENT&{
&&&&&from&{
&&&&&&&&&&&&&&Properties:Properties&
&&&&&Percentage&{
&&&&&&&&&&&&Properties:Properties&
&&&&&&&&&&&&Properties:Properties&
其中IDENT是一个动画名称，你可以随便取，当然语义化一点更好，Percentage是百分比值，我们可以添加许多个这样的百 分比，Properties为css的属性名，比如说left,background等，value就是相对应的属性的属性值。值得一提的是，我们 from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础 上加上-webkit前缀，据说Firefox5可以支持的 animation动画属性。
举个官方实例来，大伙就可以看得很清楚了，如下：
@-webkit-keyframes&'wobble'&{
&&&&&&&&margin-left:&100
&&&&&&&&background:&
&&&&&40%&{
&&&&&&&&margin-left:&150
&&&&&&&&background:&
&&&&&60%&{
&&&&&&&&margin-left:&75
&&&&&&&&background:&
&&&&&100%&{
&&&&&&&&margin-left:&100
&&&&&&&&background:&
这里我们定义了一个叫&wobble&的动画，他的动画是从0%开始到100%时结束，从中还经历了一个40%和60%两个过程，上面代码具体意思 是：wobble动画在0%时元素定位到left为100px的位置背景色为green，然后40%时元素过渡到left为150px的位置并且背景色为 orange，60%时元素过渡到left为75px的位置,背景色为blue，最后100%结束动画的位置元素又回到起点left为100px处,背景 色变成red。
定义好动画，如何调用呢，如下：
&&&&&width:&50
&&&&&height:&50
&&&&&margin-left:&100
&&&&&background:&
&&&&&-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
&&&&&-webkit-animation-duration:&10s;/*动画持续时间*/
&&&&&-webkit-animation-timing-function:&ease-in-&/*动画频率，和transition-timing-function是一样的*/
&&&&&-webkit-animation-delay:&2s;/*动画延迟时间*/
&&&&&-webkit-animation-iteration-count:&10;/*定义循环资料，infinite为无限次*/
&&&&&-webkit-animation-direction:&/*定义动画方式*/
可能大伙看到上面不是很了解，我们看下其属性的语法，再回来看这个例子就很清楚了
一、animation-name:
&&animation-name:&none&|&IDENT[,none&|&IDENT]*;
取值说明：
animation-name:是用来定义一个动画的名称，其主要有 两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任 何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个 animation给一个元素，我们只需要用逗号&，&隔开。
二、animation-duration：
&&animation-duration:&&time&[,&time&]*
取值说明：
animation-duration是用来指定元素播放动画所持续的时间长，取值:&time&为数值，单位为s （秒.）其默认值为&0&。这个属性跟transition中的transition-duration使用方法是一样的。
三、animation-timing-function:
&&&animation-timing-function:ease&|&linear&|&ease-in&|&ease-out&|&ease-in-out&|&cubic-bezier(&number&,&&number&,&&number&,&&number&)&[,&ease&|&linear&|&ease-in&|&ease-out&|&ease-in-out&|&cubic-bezier(&number&,&&number&,&&number&,&&number&)]*
&取值说明：
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease-ease-in-cubic-bezier。具体的使用方法如下：
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算&转换&过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
四、animation-delay:
&&animation-delay:&&time&[,&time&]*
&取值说明：
animation-delay:是用来指定元素动画开始时间。取值为&time&为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。
五、animation-iteration-count
&&animation-iteration-count:infinite&|&&number&&[,&infinite&|&&number&]*
&取值说明：
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值&number&为数字，其默认值为&1&；infinite为无限次数循环。
六、animation-direction
&&animation-direction:&normal&|&alternate&[,&normal&|&alternate]*
取值说明：
animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
七、animation-play-state
&&&animation-play-state:running&|&paused&[,&running&|&paused]*
&取值说明：
animation-play-state主要是用来控制元素动画的 播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将 正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播 放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。
上面我们分别介绍了animation中的各个属性的语法和取值，那么我们综合上面的内容可以给animation属性一个速记法：
&&animation:[&animation-name&&||&&animation-duration&&||&&animation-timing-function&&||&&animation-delay&&||&&animation-iteration-count&&||&&animation-direction&]&[,&[&animation-name&&||&&animation-duration&&||&&animation-timing-function&&||&&animation-delay&&||&&animation-iteration-count&&||&&animation-direction&]&]*
&如下图所示
相信大家看完语法后，应该对于上面的例子很清楚了吧。不过话说回来动画是可以做了，但兼容它的浏览器不多啊，目前只有苹果，谷歌，火狐支持。
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网&
[ 你可能感兴趣的文章 ]
[ 扫一扫，在手机上阅读 ]
[前端插件推荐] Plugin
响应式无限轮播jQuery旋转木马插件
爱思资源网 Copyright
All rights reserved.(晋ICP备号-1)}