淘宝商品分类小动画细节

293 查看

这是淘宝商品分类的一个bar,当滚动页面时,该条就会成为fixed状态。此时,鼠标悬浮上去,就会从底部向上有个描述圆往上移动的动画,看起来不错。

粗略一想,这个用css3来实现,岂不是很爽,transition只是改动top值即可。

demo

http://jsfiddle.net/xmlovecss/cFur5/

但是,如果仔细观察的话,这里有个细节。淘宝的小动画,描述圆在向上移动的过程中,就好像是被同样大小的圆形遮罩住了,所以,它显得更加自然,就好像从窗子底部偷偷爬上来似的。

哦,好像明白了什么。查看源码,发现,淘宝用了一个图片背景,圆心是透明的,其它地方同背景色。如下图:

难怪它的结构多了个shadow标签。

好,我们加入shadow层,并设置层叠值为最高,这样就能实现类似的效果了(css能画出来这样的图片么?)。

最后,我们还想给其它不支持transition属性的浏览器,使用js来实现这样的效果,怎么办捏?

 if('transition' in document.body.style){
   //support
 }else {
  //animateCallback
 }

你真以为这么搞就行啦,不行。样式对我们的js动画有影响。也就是,悬浮到图标上时的样式:

.box:hover>.info {
   top:0;
}

支持这个选择器的浏览器(IE7,8,9)不支持transition。在初次悬浮时,该样式会突然把top变为0,这样就影响了js的动画,egg pain。

demo

http://jsfiddle.net/xmlovecss/N7HpU/

淘宝没有用css3的transition,只是用了js,看来这样也好。