首页htmltransitionAnimation - 如何为CSS3 transitionEnd创建JavaScript测试

Animation - 如何为CSS3 transitionEnd创建JavaScript测试

我们想知道如何为CSS3 transitionEnd创建JavaScript测试。

A JavaScript function that tests if the browser has support for CSS3 "transitionEnd" event : - If so, it returns a new boolean object which is true and has a property called "event" which contains the supported event name as a string. - If not, it simply returns false. Because it is a CSS3 event, only quite recent browsers won't fail this test.

<!DOCTYPE html> <html> <head> </head> <body> <script type='text/javascript'>//<![CDATA[ /* Copyright (c) 2010 Sebastien P. http://twitter.com/_sebastienp MIT licensed. --- A JavaScript function that tests if the browser has support for CSS3 "transitionEnd" event : - If so, it returns a new boolean object which is true and has a property called "event" which contains the supported event name as a string. - If not, it simply returns false. Because it is a CSS3 event, only quite recent browsers won't fail this test. */ var test = (function (WINDOW) { // Munge "window" var prefixes = [ "", // Firefox "webkit", // Webkit-based "o" // Opera ], i = -1, l = prefixes.length, ret = false, vendor; while ((i += 1) < l) { vendor = prefixes[i]; if (("on" + vendor + "transitionend") in WINDOW) { ret = new WINDOW.Boolean(true); ret.event = ((vendor) ? vendor + "T" : "t") + "ransitionEnd"; break; } } return ret; }(this)); // Lazy "alert" output ... console.log("test = " + test + "\ntest.event " + ((test) ? "= " + test.event : "can't be accessed as this browser doesn't have support for it !")); //]]> </script> </body> </html>