仿新版迅雷列表进场动画体验

迅雷7的用户体验确实不错~对它的list列表进场时的动画印象尤为深刻（具体自己体验）。下面前端技术实现一下这个特效。

第一步是要模拟一种渐缓FadeIn的效果，html代码就是一个ul列表。开始对所有的li都display:none

 

$('li').each(function(index){
    $(this).fadeIn((index+1)*300);
});

直接用each循环并对li逐个增加fadeIn的时间达到一种渐缓的FadeIn动画，但是这种体验感觉更迅雷的体验还有很大的差距，还有就是fadeIn的效果其实是不够明显的。层次感不是很强。

 

于是乎，继续增加delay函数：

 

 

$('li').each(function(index){
    $(this).delay((index+1)*80).fadeIn(300);
});

 

如此的话感觉会比刚才的好很多，会有一种层次加载感。但是由于不是同步的渐入，大于一屏时由于滚动条的影响会出现屏幕的抖动，体验会比较糟糕。

 

第二步是对li的位置的调整，仔细观察迅雷的进场动画，其实每一个列表项都有一个向下微动的动作。另外其实列表载入时所有列表不是刚开始不显示的，而是以一定的透明度显示出来。

 

微动的动作我们可以对于li的css中加入负的外边距并设置透明度。

 

li{
    margin-top:-25px; 
    opacity: 0.2;
    filter:alpha(opacity=20); 
    -moz-opacity:0.2;
    -khtml-opacity: 0.2;
}

  接下来就是js

$('li').each(function(index){
    $(this).delay(index * 80).animate({
        marginTop: '0px',
        opacity: 1
    }, (index + 1) *150);
});

 

直接对每一个li逐个添加animate 改变透明度和外边距，这样就能基本实现和迅雷列表入场动画一样效果了！

另外扯一句有些同学可能会担心性能问题，经测试其实这样的动画在各个浏览器都能流畅运行！