这里分析一个aniAuto插件的实例demo,直接看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>详解demo</title> <link rel="stylesheet" type="text/css" href="css/animate.css"> <script src="js/jquery-1.12.3.min.js"></script> <script src="js/aniAuto.min.js"></script> <style type="text/css"> .con-ter{ color:#E67E22; width: 100%; height: 100%; background-color: papayawhip; text-align: center; overflow: hidden; } .list-li{ width: 1000px; margin: auto; list-style: none; overflow: hidden; } .list-li li{ width: 300px; float: left; margin-left: 30px; height:400px; } .list-li li img { height: 100%; } .lt { margin:30px auto 20px auto; text-align: center; } .sil-btn { border: none; background: #E67E22; width: 200px; height: 35px; line-height: 35px; border-radius: 9px; color:#ffffff; font-size: 16px; } </style> </head> <body> <div class="con-ter slideInUp animated"> <h1 class="bounceIn ani-auto" ani-delay="1s" ani-duration="2s">新上架潮衣</h1> <ul class="list-li"> <li class="zoomInLeft ani-auto" ani-delay="1.5s" ani-duration="1s"><img src="img/2016081714500329.jpg" /></li> <li class="zoomInUp ani-auto" ani-delay="1.5s" ani-duration="3s" ><img src="img/2016081714500390.jpg" /></li> <li class="zoomInRight ani-auto" ani-delay="1.5s" ani-duration="4s"><img src="img/2016081714500391.jpg" /></li> </ul> <div class="lt"> <button class="sil-btn">立即购买</button> </div> </div> <script> $(document).ready(function () { $.aniAuto(); }); </script> </body> </html>
代码解析:
之所以会有
ani-delay="1s" ani-duration="2s"
我们查看aniAuto.js源码就会发现
if ($item.attr('ani-duration')) { duration = $item.attr('ani-duration'); $item.css({ 'animation-duration': duration, '-webkit-animation-duration': duration, '-ms-animation-duration': duration, '-woz-animation-duration': duration }); }
这里给标签动态添加属性,其优先级为内联样式>内部样式表>外部样式表
所以即使你在css里做了修改,任然无效
.