Transition CSS

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

.. include:: /www/lab/web-transition/index.html :start: 13 :end: 14
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.