Detect CSS transitions using Javascript (and without modernizr)?
Perhaps something like this. Basically it's just looking to see if the CSS transition
property has been defined:
function supportsTransitions() {
var b = document.body || document.documentElement,
s = b.style,
p = 'transition';
if (typeof s[p] == 'string') { return true; }
// Tests for vendor specific prop
var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
p = p.charAt(0).toUpperCase() + p.substr(1);
for (var i=0; i<v.length; i++) {
if (typeof s[v[i] + p] == 'string') { return true; }
}
return false;
}
Adapted from this gist. All credit goes there.
Detect CSS transitions using Javascript (and without modernizr)?
Perhaps something like this. Basically it's just looking to see if the CSS transition
property has been defined:
function supportsTransitions() {
var b = document.body || document.documentElement,
s = b.style,
p = 'transition';
if (typeof s[p] == 'string') { return true; }
// Tests for vendor specific prop
var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
p = p.charAt(0).toUpperCase() + p.substr(1);
for (var i=0; i<v.length; i++) {
if (typeof s[v[i] + p] == 'string') { return true; }
}
return false;
}
Adapted from this gist. All credit goes there.
How would I detect CSS Transition support on :before pseudo-elements with javascript?
Thanks to @Asad for digging up some handy code, I was able to come up with a nice solution here's the jQuery version:
$(function() {
var isTransitionSupported = (function (pseudo, transProp, transPropStart, transPropEnd) {
var id = pseudo + transProp + '-' + (new Date()).valueOf(),
prefixes = ['o', 'ms', 'moz', 'webkit'],
prop = "transition: " + transProp + " 99s linear;",
allprops = (function () {
var props = "";
for (var l = prefixes.length; l--;) {
props += "-" + prefixes[l] + "-" + prop;
}
return props + prop;
}()),
$css = $("<style>" +
"#" + id + "{position:absolute;left:-999em;}" +
"#" + id + ":" + pseudo + "{display:block;content:'M';" + transProp + ":" + transPropStart + ";}" +
"#" + id + ".t:" + pseudo + "{" + allprops + transProp + ":" + transPropEnd + ";}" +
"</style>"),
$bct = $('<div id="' + id + '" />');
$css.appendTo("head");
$bct.appendTo("body");
try {
// get style value before any changes
window.getComputedStyle($bct[0], ':' + pseudo).getPropertyValue(transProp);
$bct.addClass("t");
// test style after changes
return (window.getComputedStyle($bct[0], ':' + pseudo).getPropertyValue(transProp) !== transPropEnd);
} catch (e) {}
return false;
}("before", "width", "0px", "1000px"));
});
Here's a version that doesn't use jQuery:
var isTransitionSupported = (function (pseudo, transProp, transPropStart, transPropEnd) {
var ticks = (new Date()).valueOf(),
id = pseudo + transProp + '-' + ticks,
prefixes = ['o', 'ms', 'moz', 'webkit'],
prop = "transition: " + transProp + " 99s linear;",
allprops = (function () {
var props = "";
for (var l = prefixes.length; l--;) {
props += "-" + prefixes[l] + "-" + prop;
}
return props + prop;
}()),
body = document.body || document.createElement('body'),
node = document.createElement('div'),
css = "<style>" +
"#" + id + "{position:absolute;left:-999em;}" +
"#" + id + ":" + pseudo + "{display:block;content:'M';" + transProp + ":" + transPropStart + ";}" +
"#" + id + ".t" + ticks + ":" + pseudo + "{" + allprops + transProp + ":" + transPropEnd + ";}" +
"</style>",
bct = document.createElement('div'),
isSupported = false;
bct.id = id;
node.innerHTML += css;
node.appendChild(bct);
body.appendChild(node);
try {
// get style value before any changes
window.getComputedStyle(bct, ':' + pseudo).getPropertyValue(transProp);
bct.className += "t" + ticks;
// test style after changes
isSupported = (window.getComputedStyle(bct, ':' + pseudo).getPropertyValue(transProp) !== transPropEnd);
} catch (e) {}
node.parentNode.removeChild(node);
return isSupported;
}("before", "width", "0px", "1000px"));
document.documentElement.className += ' ' + (isTransitionSupported ? '' : 'no-') + "pseudo-trans";
Here's all that code in a gist on github, if anyone wants to fork and improve it.
Detect support for transition with JavaScript
Modernizr will detect this for you. Use this link to create a custom download build that only contains CSS3 2D and/or 3D transitions.
Once it's run, you can either test for the csstransitions
class on the html
tag (CSS), or in JavaScript, test if Modernizr.csstransitions
is true
.
More docs: http://modernizr.com/docs/#csstransitions
CSS3 transition events
W3C CSS Transitions Draft
The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.
Webkit
To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is
webkitTransitionEnd
.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Mozilla
There is a single event that is fired when transitions complete. In Firefox, the event is
transitionend
, in Opera,oTransitionEnd
, and in WebKit it iswebkitTransitionEnd
.
Opera
There is one type of transition event
available. TheoTransitionEnd
event
occurs at the completion of the
transition.
Internet Explorer
The
transitionend
event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.
Stack Overflow: How do I normalize CSS3 Transition functions across browsers?
Using Modernizr and jQuery to Animate if CSS3 Transitions Don't Exist
Solved this myself. The way I did was like this
<!doctype html>
<html>
<head>
<title>Modernizr + jQuery Testing</title>
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
$(function() {
$('#js').hover(function(){
$(this).animate({width:'50px',height:'50px'},{queue:false,duration:500});
}, function(){
$(this).animate({width:'100px',height:'100px'},{queue:false,duration:500});
});
});
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div {
border: 1px solid red;
height: 100px;
margin: 25px auto;
width: 100px;
}
#css {
transition: height .5s, width .5s;
-khtml-transition: height .5s, width .5s;
-moz-transition: height .5s, width .5s;
-o-transition: height .5s, width .5s;
-webkit-transition: height .5s, width .5s;
}
#css:hover {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="js">
JS
</div>
<div id="css">
CSS
</div>
</body>
</html>
That worked perfectly. The CSS one only animates in new browsers (because that's the only place it can) and the JS one only animates in old browsers. If you use this script, you can get modernizr from http://www.modernizr.com/ and jQuery from http://www.jquery.com/ (of course).
Related Topics
Handle Response - Syntaxerror: Unexpected End of Input When Using Mode: 'No-Cors'
Vuejs: Why Is "This" Undefined
Detect Click Outside React Component
How to Use Jquery with Node.Js
Check If Element Is Visible in Dom
Using Jquery to Test If an Input Has Focus
Difference Between Innertext, Innerhtml and Value
Make Iframe Height Dynamic Based on Content Inside- Jquery/Javascript
What Is the Significance of the JavaScript Constructor Property
How to Set a Cookie for Another Domain
Rotate the Elements in an Array in JavaScript
Cross-Browser JavaScript Xml Parsing
Jquery in Greasemonkey 1.0 Conflicts with Websites Using Jquery
Jqgrid Server Side Error Message/Validation Handling
Es6 Class Variable Alternatives