Transition CSS

Petite expérimentation sur la gestion des transitions CSS d'un élément, avec identification de la fin de toutes les transitions.

Test de transition d'un élément (Firefox 12, Chromium 18, Opera 12 beta).
Contenu indisponible.
Objet de gestion des transitions CSS d'un élément.
<div id="box-test" class="start"></div>
<p><button id="play">PLAY</button></p>
Code HTML du test.
#box-test { 
    height: 50px; 
    -webkit-transition-property: width, background-color;
       -moz-transition-property: width, background-color;
        -ms-transition-property: width, background-color;
         -o-transition-property: width, background-color;
            transition-property: width, background-color;
    -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
        -ms-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;
}
.start { 
    background-color: #f00; width: 50px; 
}
.transition {
    width: 400px;
    background-color: #00f;
}
Code CSS du test.
require(['rnb/ui/utils/Transition'], function(Transition) {
    var box = document.getElementById('box-test'),
        btn = document.getElementById('play'),
        trans = new Transition(box, function() {
            box.classList.remove('transition');
            btn.disabled = false;
        });
    btn.addEventListener('click', function (e) {
        btn.disabled = true;
        box.classList.add('transition');
    });
});
Code javascript du test.