css3 的过渡动画,有些时候会产生一些其他问题。
比如:你想先改一个css属性,之后再进行动画过渡,结果实际上你会发现,css属性和动画是同步进行的。这个应该是在编译阶段就确定好了。
所以只能通过settimeout 来进行异步处理。
<!DOCTYPE html> <!--HTML5 doctype--> <html> <head> <style type="text/css"> .stage { width: 300px; height: 300px; float: left; margin: 15px; position: relative; background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .container { position: absolute; top: 50%; left: 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .container img { position: absolute; } .container img:nth-child(1){ z-index: 1; opacity: .6; } .s1 img:nth-child(2){ z-index: 2; -webkit-transform: translate3d(30px,30px,200px); -moz-transform: translate3d(30px,30px,200px); -ms-transform: translate3d(30px,30px,200px); -o-transform: translate3d(30px,30px,200px); transform: translate3d(30px,30px,-200px); } .s2 img:nth-child(2){ z-index: 2; -webkit-transform: translate3d(30px,30px,-200px); -moz-transform: translate3d(30px,30px,-200px); -ms-transform: translate3d(30px,30px,-200px); -o-transform: translate3d(30px,30px,-200px); transform: translate3d(30px,30px,-200px); } </style> <script src="jquery.min.js"></script> <script> function c(){ $("#aaaa").css("left", "-10px"); } function a(){ $("#aaaa")[0].style["transform"] = "translate3d(-100%,0,0) scale(1)"; //for(var s = +new Date(); s + 200 > +new Date();){} $("#aaaa")[0].style["transition"] = "all 0.23s ease-out"; // for(var s = +new Date(); s + 200 > +new Date();){} //for(var s = +new Date(); s + 30000 > +new Date();){} //$("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)"; console.log(111111) } function b(){ $("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)"; } </script> </head> <body> <div class="stage s1"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" id="aaaa" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> </div> </div> <div class="stage s2"> <div class="container"> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> </div> </div> </body> </html>
$("#aaaa")[0].style["transform"] ="translate3d(-100%,0,0) scale(1)";
$("#aaaa")[0].style["transition"] = "all 0.23s ease-out";