JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<h1>transition end event</h1>

<p>click box for transition</p>

<div id="box"></div>

<p id="faux-console">event name : </p>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#box {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition:    -moz-transform 1s;
       -o-transition:      -o-transform 1s;
}

#box.transition { 
  background: green; 
  -webkit-transform: translate( 200px, 0);
     -moz-transform: translate( 200px, 0);
       /* opera can have no leading space in transform fn 
          see : http://dropshado.ws/1260101028
            */
       -o-transform: translate(200px, 0); 
}

#box.transition.end {
  background: red;
}

JavaScript

init = function() {
  var box = document.getElementById('box'),
      fauxConsole = document.getElementById('faux-console'),
      onTransitionEnd = function( event ) {
        event.target.className = 'transition end'
        fauxConsole.textContent += event.type;
      },
      onMouseDown = function( event ) {

        event.target.className = 'transition';
        event.target.addEventListener( 'webkitTransitionEnd', onTransitionEnd, false );
        event.target.addEventListener( 'oTransitionEnd', onTransitionEnd, false );
        event.target.addEventListener( 'transitionend', onTransitionEnd, false );
      };
  
  box.addEventListener( 'mousedown', onMouseDown, false );
  
};

window.addEventListener( 'DOMContentLoaded', init, false );