Create a gist now

Instantly share code, notes, and snippets.

Example usage of a cross-browser ontransitionend event (CSS transition)
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<style type="text/css" media="screen">
div {
background-color: red;
width: 10em;
height: 10em;
margin: 0 auto;
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
html {
-webkit-user-select: none;
}
</style>
</head>
<body>
<div id="demo">Mouseover me!</div>
<script type="text/javascript" charset="utf-8">
var myDiv, transition;
myDiv = document.getElementById('demo');
// working demo at http://davidbcalhoun.com/html5/transition.html
var myDiv, transition;
myDiv = document.getElementById('demo');
if('ontransitionend' in window) {
// Firefox
transition = 'transitionend';
} else if('onwebkittransitionend' in window) {
// Chrome/Saf (+ Mobile Saf)/Android
transition = 'webkitTransitionEnd';
} else if('onotransitionend' in myDiv || navigator.appName == 'Opera') {
// Opera
// As of Opera 10.61, there is no "onotransitionend" property added to DOM elements,
// so it will always use the navigator.appName fallback
transition = 'oTransitionEnd';
} else {
// IE - not implemented (even in IE9) :(
transition = false;
}
// Example usage
myDiv.addEventListener(transition, function(){
//alert(Date.now() + ' transition end!');
}, false);
// hover replacement for touch devices
if('ontouchstart' in window) {
myDiv.addEventListener('touchstart', function(){
this.style.opacity = 0;
}, false);
myDiv.addEventListener('touchend', function(){
this.style.opacity = 1;
}, false);
}
</script>
</body>
</html>
@blissdev

This seems to fail in Firefox Nightly.

@LucidityDesign

('ontransitionend' in window) is false in Firefox 28.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment