public
Last active

Example usage of a cross-browser ontransitionend event (CSS transition)

  • Download Gist
transitionend.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
 
<!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>

This seems to fail in Firefox Nightly.

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.