Comment puis-je personnaliser dynamiquement les paramètres d'animation CSS ?

Personnalisation des animations CSS avec des valeurs paramétrées

L'animation CSS fournie définit la durée et les paramètres d'un élément glissant depuis la gauche. Cependant, que se passe-t-il si vous souhaitez personnaliser ces paramètres de manière dynamique en fonction du contexte ?

Une façon d'y parvenir consiste à utiliser des variables CSS. Voici comment procéder :

p {
durée d'animation : 3 s ;
nom d'animation : slidein;
}

@keyframes slidein {
de {

margin-left: var(--m, 0%);
width: var(--w, 100%);

}

à {

margin-left: 0%;
width: 100%;

}
}

Maintenant, en utilisant JavaScript, vous pouvez définir les valeurs pour --m (marge gauche) et --w (largeur) comme ceci :

document.querySelector('.p2').style.setProperty('--m', '100%');
document.querySelector('.p2').style.setProperty('--w', '300%');

Cela vous permet de contrôler les paramètres d'animation pour éléments spécifiques de manière dynamique.

À titre d'exemple, considérons deux paragraphes avec des noms de classe "p1" et "p2":

.p1,.p2 {
durée d'animation : 3 s;
nom d'animation : slidein;
}

Cela pas animé car l'animation utilisera la valeur par défaut définie sur la variable

Ceci s'animera car nous avons modifié la variable CSS en utilisant JS

Le premier paragraphe ne s'animera pas car il utilise les valeurs par défaut pour --m et --w. Le deuxième paragraphe, cependant, s'animera selon les paramètres personnalisés définis en JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!