Admin/Dev

Lorsque vous appliquez une animation sur une classe CSS, puis cette classe sur un élément HTML, vous pouvez choisir le nombre de fois ou l'animation sera jouée, de une fois à l'infini.

Lorsque vous choisissez l'infini, le problème ne se pose pas, mais lorsque vous choisissez un nombre bien fini, vous pouvez souhaiter rejouer l'animation à un moment donné.

Simplement, on pourrait penser qu'en retirant la classe "monAnimation" de l'élément HTML "monElement", puis la remettre, l'animation se rejouerait.

monElement.className = '';
monElement.className = 'monAnimation';

Malheureusement, ce n'est pas aussi simple que cela, mais heureusement, cela n'est pas non très compliqué.

En fait, si le changement de classe ne fonctionne pas, c'est que l'élément n'est pas "redessiné" par le navigateur. Donc, pour que cela marche, il faut simplement faire en sorte que le navigateur redessine la cellule entre les deux changements.

Pour cela il suffit d'uiliser la commande offsetWidth (ou offsetHeight) sur la cellule. Ces deux commandes ont l'avantage de forcément l'actualisation de la cellule, mais aussi de ne faire aucun chancement sur l'état ni l'affichage de l'élément. Il s'agit d'une commande neutre.

monElement.className = '';
void monElement.offsetWidth;
monElement.className = 'monAnimation';

Et voilà, le tour est jour est joué.