div点击添加css动画 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>div点击添加css动画</title>
 </head>
<style>
html, body {
   height: 100%;
} 

#big_div{
    width:100%;
    height:100%;
    background-color:#00FF00;
}

.small_div{
    width:100%;
    height:30px;
    background-color:#0000FF;
    border-bottom:1px solid;
    border-color:#aa2F2F;
}
/*x轴平移-20%*/
.animotion{
-webkit-transform: translateX(-20%);
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-webkit-transition-delay:0;
-webkit-transition-timing-function:ease;
}
/*x轴平移会原位置*/
.ooanimotion{
-webkit-transform: translateX(0px);
-webkit-transition-property:all;
-webkit-transition-duration:0.3s;
-webkit-transition-delay:0;
-webkit-transition-timing-function:ease;
}
/*旋转180度*/
.roanimotion{
-webkit-transform: rotate(180deg);
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-webkit-transition-delay:0;
-webkit-transition-timing-function:ease;
}
/*旋转回原角度*/
.ooroanimotion{
-webkit-transform: rotate(0deg);
-webkit-transition-property:all;
-webkit-transition-duration:0.3s;
-webkit-transition-delay:0;
-webkit-transition-timing-function:ease;
}

/*box盒子布局*/
.ub
{

    display: -webkit-box;
    display: -moz-box;
    position:relative;
}
/*垂直居中*/
.ub-ac
{
    -webkit-box-align:center;
    -moz-box-align:center;
    box-align:center;
}
/*水平居中*/
.ub-pc
{
    -webkit-box-pack:center;
    -moz-box-pack:center;
    box-pack:center;
}

.ub-rev
{
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

.ub-ver
{
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

.ub-f1
{
    position:relative;
    -webkit-box-flex: 1; 
    box-flex: 1;
}

</style>
<link rel="stylesheet" href="dist/css/ionic1.css">
 <body>
  <div id="big_div" class="ub ub-ver">
    <div class="ub">
        <div class="ub small_div ub-ac" onclick="goto(event);" style="z-index:2;">
            <div class="ub-f1">111</div>
            <div class="icon ion-arrow-left-c"></div>
        </div>
        <div class="ub ub-ac ub-pc" style="position:absolute;width:20%;height:100%;background-color:#FF0000;right:0;z-index:1;" onclick="deletediv(event);">444</div>
    </div>
    <div class="ub">
        <div class="ub small_div ub-ac" onclick="goto(event);" style="z-index:2;">
            <div class="ub-f1">222</div>
            <div class="icon ion-arrow-left-c"></div>
        </div>
        <div class="ub ub-ac ub-pc" style="position:absolute;width:20%;height:100%;background-color:#FF0000;right:0;z-index:1;" onclick="deletediv(event);">444</div>
    </div>
    <div class="ub">
        <div class="ub small_div ub-ac" onclick="goto(event);" style="z-index:2;">
            <div class="ub-f1">333</div>
            <div class="icon ion-arrow-left-c"></div>
        </div>
        <div class="ub ub-ac ub-pc" style="position:absolute;width:20%;height:100%;background-color:#FF0000;right:0;z-index:1;" onclick="deletediv(event);">444</div>
    </div>
  </div>
 </body>
 <script>
 var lastFold='';
 //执行css动画
 function goto(e){
    var a = e.currentTarget;
    if (lastFold != "" && lastFold != a) {
        if (lastFold.className.indexOf(' animotion') < 0) {
            
        }else{
            lastFold.className = lastFold.className.replace(" animotion", " ooanimotion");
            lastFold.lastElementChild.className = a.lastElementChild.className.replace(" roanimotion", " ooroanimotion");
        }
    }
    if (a.nodeName == "DIV") {
        if (a.className.indexOf(' animotion') < 0) {
            a.className = a.className.replace(" ooanimotion", "");
            a.lastElementChild.className = a.lastElementChild.className.replace(" ooroanimotion", "");
            a.className += ' animotion';

            a.lastElementChild.className += ' roanimotion';
        }else {
            a.className = a.className.replace(" animotion", " ooanimotion");
            a.lastElementChild.className = a.lastElementChild.className.replace(" roanimotion", " ooroanimotion");
        }
    }
    lastFold = a;
}
//移除节点div
function deletediv(e){
    var a = e.currentTarget;
    a.parentNode.parentNode.removeChild(a.parentNode);
}
 </script>
</html>

效果如下：

posted @ 2014-01-04 22:22  无心花  阅读(1526)  评论(0)  编辑  收藏  举报