Skip to content

Instantly share code, notes, and snippets.

@wangzuo
Forked from davidcalhoun/transitionend.html
Created June 10, 2014 06:23

Revisions

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