我用css3的transition实现动画效果，在单页面下是完全没有问题的，问题在于我做一个手机翻页的效果，当将要翻到这一页的时候我把这个页面的内容清空，只留下背景图，同时把透明度调低，然后当这个页面呈现出来，再动态添加节点，这个时候transition的效果没有出现，直接出来的是变换以后的效果，贴上测试代码
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <link rel="stylesheet" href="css/jquery.fullPage.css"> <style> .section { text-align: center; font: 50px "Microsoft Yahei"; background-color:#D4D4D4; } #wrapper { background: url("images/bg_page_1.jpg"); height: 969px; width: 640px; margin: 0 auto; text-align: center; overflow: hidden; } #img4 { transform: scale(0, 0); transition: 1s; } </style> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> $().ready(function(){ $('#dowebok').fullpage({ sectionsColor: ['#4BBFC3', '#D4D4D4', '#7BAABE', '#f90'],css3:true, afterLoad: function(anchorLink, index){ if(index == 2){ var $c4 = $('<div id="container4"><img id="img4" src="images/44.png"/ alt="CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose" ></div>'); $c4.appendTo($("#wrapper")); $("#img4").css("transform","scale(1,1)"); $("#wrapper").css("opacity","1"); } }, onLeave: function(index,nextIndex,direction){ if(index == '1' || index == "3" && nextIndex == '2'){//刚一离开页面 就把上个页面的内容清除 只留背景图 然后页面全部出现再加载内容 $("#container4").remove(); $("#wrapper").css("opacity","0.4"); } } }); $("#img4").css("transform","scale(1,1)"); $("#img2").css("top","0px"); $("#img3").css("top","0px"); }) </script></head><body><div id="dowebok"> <div class="section"> <div class="slide"><h3>第一屏的第一屏</h3></div> <div class="slide"><h3>第一屏的第二屏</h3></div> <div class="slide"><h3>第一屏的第三屏</h3></div> </div> <div class="section active"> <div id="wrapper"> <div id="container4"> <img id="img4" src="images/44.png"/ alt="CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose" > </div> </div> </div> <div class="section"> <h3>第三屏</h3> </div> <div class="section"> <h3>第四屏</h3> </div></div></body></html>
用animation替代transition也不行啊 我需要transition的一个效果 然后再调用animation让他持续播放动画
解决结贴
写两个animation 然后用setTimeOut定时切换
完毕
