JSFiddle - React, Tailwind, and code Playground

by ianlunn

HTML

<div id="hi">
     Click here to start a transition. A listener has been bound which should trigger an alert() when the transition ends.
</div>

CSS

.enabled{
    color: red;
    -o-transition-duration: 2s;
    -webkit-transition-duration: 2s;
}

JavaScript

$(document).ready(function(){
    $("#hi").click(function(){
        $(this).addClass("enabled");
    });
});

function finished(){
alert("transition ended");        
}

document.addEventListener("oTransitionEnd", finished);
document.addEventListener("webkitTransitionEnd", finished);

//weird behaviour: Opera actually triggers the transitionEnd event twice for one event. If you comment out one listener, two alert boxes still appear. This happens in desktop Opera too so I'm asumming it's a bug rather than relating to the experimental Opera Mobile Emulator.