执行一组CSS属性的自定义动画。 还有一个例外,这个方法还支持不属于CSS属性的scrollTop属性。
fx.animate(elm, properties, duration, ease, callback, delay)
Example: 点击按钮,根据指定的一系列属性,在 div 上应用动画。
<!DOCTYPE html> <html> <head> <style> div { background-color: #bca; width: 100px; border: 1px solid green; } </style> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script> <script> require.config({ baseUrl: "./", packages: [{ name: "skylark", location: "../../../src/skylark" }, ] }); </script> </head> <body> <button id="go">» Run</button> <div id="block">Hello!</div> <script> require(["skylark/query", "skylark/finder", "skylark/fx"], function(query, finder, fx) { query("#go").on("click", function() { fx.animate(finder.byId("block"), { width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500); }); }); </script> </body> </html>