JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text">
    Click this text to start a transition.
</div>
<p><a href="http://www.ianlunn.co.uk/blog/articles/concerns-about-opera-rendering-webkit-properties/" title="Read the blog post">Read the blog post</a></p>

CSS

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

p{
    margin: 20px;
}

JavaScript

$(document).ready(function(){
                //when the text is clicked, start the transition
                $("#text").bind("click", function(){
                    $(this).addClass("enabled");
                })
                
                //jQuery listeners such as these no longer work in Experimental Opera Mobile Emulator (EOME)...
                /*$(document).bind("webkiTransitionEnd oTransitionEnd", function(e){
                    alert(e.type);
                });*/
                
                //However, normal JS listeners do...
                /*document.addEventListener("oTransitionEnd", function(e){
                    alert(e.type);
                });*/
                
                //The problem is that in EOME, e.type is returned in lower case (otransitionend), this is why jQuery doesn't work when binding oTransitionEnd. Hopefully this is just a mistake in Opera and can be easily fixed rather than having to make changes to jQuery and losing backwards compatibility in EOME
                
                //As a workaround, you can bind the lowercase transition events, like so...
                $(document).bind("webkittransitionend otransitionend", function(e){
                    alert(e.type);
                });
                //The good news is that EOME understands both Webkit and Opera transition events but will return Opera over Webkit.
                
                //Unrelated Bonus Bug: transitionEnd occurs twice in Opera 11.64 and EOME
            });