Admin/Dev

09
Mai
2018

Astuce CSS : Re-jouer une animation CSS

Publié par sky

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é.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
 
Tout accepter Tout refuser Gérer