百度客户端首页的图片轮换效果

今天看了下css3中关于动画的一些内容，想到自己手机上了装了一个百度的客户端。有个换一批的功能。点击后，可以快速浏览不同的分类信息。网上找了个截图。

这个图没显示全，最下面那个 换一批 的按钮没显示出来。

点击换一批后，上面的新闻会以一种旋转的动画方式进行替换新的新闻，我个人觉得那种动画方式 有点像开关窗户的动作，很有意思。
然后就是看下，怎么实现效果的呢，

css3中的动画 网上介绍的有translate(x,y)---移动,rotate(deg)---旋转，skew(x,y)---缩放，和这里的效果好像都不太沾边。我查了好多才知道，这里用的是rotate

但并不是直接给一个角度就可以的，用的是rotateY(deg)-----没错，rotate还有rotateX,rotateY()两个方法，传的参数值和rotate一样，只要传个角度就可以。

#two{
     width : 200px;
     height : 100px;
     background : #ccc;
     display:inline-block;                    
}
.a{
    -moz-animation: change 1s linear;
    -webkit-animation : change 1s linear;
 }
            
            
 @-moz-keyframes change{
     25% {-moz-transform: rotateX(180deg);}
 }

 @-webkie-keyframes change{
     25% {-moz-transform: rotateX(180deg);}
 }

样式出来了，现在要做的是，点击标签，背景展示换窗口的效果，同时标签内的内容页发生了变化。这样的话就需要添加事件了。

function id(id){
    return document.getElementById(id);
}

id('two').onclick = function(){
    id('two').className = 'a';
    id('two').innerHTML = 'new content';
             
};

嗯 点击后，因为增加了动画样式，所以背景展示换窗口效果，内容也变化了，但是再点击，由于目前标签已经有了'a'样式，因此，就不再展示换窗口效果了。

怎么解决，很简单，点击标签的时候，先添加动画样式，动画展示完后，再清掉动画样式。那下一个问题，如何知道css3动画已经展示完了呢，如何监听css3的动画事件呢

两个解决方案，第一个，制定一个计时器，和动画的时间一样长。

第二个：监听css3的动画事件（百度真好，我是百度才知道原来还有这么些事件的。）

 当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。-----缺点（值适用于chrome。火狐下还是要用计时器,悲催）

同 webkitAnimationEnd类似的还有 动画的开始事件 ---webkitAnimationStart；

因此代码再次的修订如下：

        function id(id){
        return document.getElementById(id);
    }
    
    id('two').onclick = function(){
        id('two').className = 'a';
             
    };
    
        
    id('two').addEventListener('webkitAnimationEnd',function(){
        id('two').className = '';
        id('two').innerHTML = 'new content';
    })

 

在chrome下试了下，木有问题，附上css3中，对rotateX以及rotateY的介绍。

 

转载于:https://www.cnblogs.com/lxin/p/3548554.html