<!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;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;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;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>
效果如下：
