先看一下该网站的效果
http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/
该站里面的动画效果由简易动画与css3动画2种方式混合达到的。
一、特点与差异、
1.简易动画直接通过对dom元素追加class类名与属性参数
像这样
<img src="images/page02/text01.png" class="text01 cmn-animate" cfg="{action:[{styles:{'opacity':'0'},speed:200},{styles:{'opacity':'1'},speed:1600}],loop:0,index:1}" />
实现原理:是对jQuery的animate动画的改写,以达到控制元素的css样式实现动画效果。
2.css3动画(这个参考一下代码)
实现原理:主要是通过css关键帧在不同时间段对样式属性的变化控制实现动画效果。
3.transform做 css3动画效果,页面切版做好以后直接加上去即可(因为已经设置定位了),不用改变以前的位置属性已经最终的位置属性。
以首页的车子从页面外面飞到页面里面为例:
如果适用简易动画,要首先把车子的left属性设置为left:-200px;然后再通过在一定的时间内把left设置为0,让其进入页面内。我们在切版的时候就是设置了left:0;
现在为了添加动画效果,需要在样式表里面把车子初始值left设置为-2000px,最后再设置后来为0,已达到简单的飞入动画效果。
如果是通过css3的transform 做出的动画效果,从我们切版的角度是不会影响到原来元素位置的最终属性值(position:absolute;left:xxpx;top:xxpx;)。
简易动画的位置变化效果是时刻在改变元素的位置属性值
简易动画的动画效果添加相对略微麻烦一点。因为起始位置属性要改变,最终位置属性值才是页面切版后的位置属性值。
4.适用性:简易动画适用与PC端移动端都可以。css3动画则不兼容IE7,8。