Skip to content

Instantly share code, notes, and snippets.

@davidcalhoun

davidcalhoun/transitionend.html

Created November 17, 2010 01:01
Show Gist options
  • Save davidcalhoun/702826 to your computer and use it in GitHub Desktop.
Save davidcalhoun/702826 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. davidcalhoun created this gist Nov 17, 2010.
    Empty file added gistfile2.txt
    View file
    Empty file.
    80 changes: 80 additions & 0 deletions transitionend.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,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>