Which Transition Event (Modernizr)

index.html

<div id="subject">
  div#subject
  <input type="button" value="fade to red" id="fadeToRed">
  <input type="button" value="fade to green" id="fadeToGreen">
</div>

script.js

#listen transitions
transEndEventNames =
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'

transEndEventName = transEndEventNames[Modernizr.prefixed 'transition'];

subject = document.getElementById 'subject'
subject.addEventListener transEndEventName, () ->
  alert('transition end');
, false

#listen buttons
document.getElementById('fadeToGreen').addEventListener 'click', () ->
  subject.className = 'green';
  
document.getElementById('fadeToRed').addEventListener 'click', () ->
  subject.className = 'red';

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

@import 'compass';

div {
  margin: 100px;
  padding: 20px;
  background: grey;
}

.red {
  background-color: red;
  @include transition(background-color 1s);
}

.green {
  background-color: green;
  @include transition(background-color 1s);
}

Which Transition Event (Modernizr).markdown

Which Transition Event (Modernizr)

the same as http://codepen.io/yevt/pen/jdyAB but used modernizr coffee scss

A Pen by yevt on CodePen.

License.