TweenMax-回撥函式和3D
阿新 • • 發佈：2018-11-22
回撥函式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; margin: 10px; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <script type="text/javascript" src="js/TweenMax.min.js" ></script> <script> var t = new TimelineMax(); t.staggerTo('div',5,{ x: 100, onStart: function(){ console.log("onStart*******"); }, onUpdate: function(){ console.log("onUpdate*******"); }, onComplete: function(){ console.log("onComplete*******"); } },1) </script> </body> </html>
3d動畫
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /** * transform-style: preserve-3d; 父級是3D空間 * perspective: 800px; 緊身 */ /*body{ transform-style: preserve-3d; perspective: 100px; }*/ div{ width: 100px; height: 100px; background: red; margin: 50px auto; } </style> </head> <body> <div></div> <script type="text/javascript" src="js/TweenMax.min.js" ></script> <script> var t = new TimelineMax(); t.set('div',{ transformPerspective: 300 }) t.to('div',5,{ rotationY: 45 },1) </script> </body> </html>