Les transitions et l'interface DOM
Comme pour toutes les propriétés CSS, il est possible de manipuler les valeurs au travers de l'interface DOM grâce à JavaScript pour déclencher des transitions à la demande, sans utiliser de pseudo-classes CSS.
Remarque : Utilisation concrète dans webkit (Safari, Chrome)
Le nom des propriétés CSS manipulables au travers du JavaScript est également préfixé par webkit ; Ainsi transitionProperty devient webkitTransitionProperty.
L'exemple suivant déclenche une transition car la valeur de la propriété width change.
var box = document.getElementById('boite');
box.style.width = "300px";
Les propriétés spécifiques sont également précisables à l'aide de cette interface.
var box = document.getElementById('boite');
box.style.transitionDuration = "2s";
Les événements
Le module des transitions CSS3 décrit également un ensemble d'événements JavaScript qui sont générés à des moments précis à la fin de la transition. Ces événements permettent de réagir après un événement et de par exemple le synchroniser avec un autre.
L'événement lancé est nommé transitionEnd et est, comme son nom l'indique, provoqué par la fin de la transition.
Cet exemple illustre l'utilisation de cet évènement en affichant un message.
Remarque : Utilisation concrète dans webkit (Safari, Chrome)
Dans l'implémentation Webkit, les évènements liés à cette spécification sont préfixés par webkit ; transitionEnd, devient alors webkitTransitionEnd.
Deux attributs sont attachés à cet évènement :
- propertyName : Le nom de la propriété attaché à la transition.
- elapsedTime : Le temps écoulé depuis le début de la transition (sans tenir compte du délai).