We would like to know how to create JavaScript test for CSS3 transitionEnd.
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>//from w w w.j a v a 2 s .c o m
<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>