Comment puis-je utiliser des variables JavaScript pour définir dynamiquement les valeurs d'images clés WebKit ?

Utiliser JavaScript pour définir les valeurs des images clés du kit Web avec des variables

Vous êtes confronté à un défi courant lorsque vous essayez d'utiliser des valeurs aléatoires générées en JavaScript pour Animations CSS. Les variables JavaScript ne peuvent pas être directement injectées dans les images clés CSS.

Au lieu de cela, vous devez créer les règles CSS de manière dynamique via JavaScript et les insérer dans le modèle d'objet CSS (CSSOM).

Dynamique Création d'images clés

Suivez ces étapes pour créer et manipuler des images clés dynamiquement :

1. Créez l'objet d'animation d'image clé souhaité à l'aide de la méthode window.document.createElement(). Cet objet servira de conteneur pour vos définitions d'images clés.
2. Définissez les images clés réelles à l'aide de la méthode keyframes.insertRule(). Cette méthode prend deux paramètres : le pourcentage d'images clés et les règles CSS pour ce pourcentage.
3. Insérez l'animation d'images clés nouvellement créée dans le CSSOM à l'aide de la méthode sheet.insertRule().

Exemple

Voici un exemple qui crée et écrase dynamiquement une animation d'image clé existante avec une rotation aléatoire valeurs :

function createRandomRotation(dogValue) {
  // Create the keyframe animation object
  let rotateAnimation = window.document.createElement('style');

  // Define the actual keyframes
  rotateAnimation.innerHTML = `
    @-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(-${dogValue});}
      100% {-webkit-transform: rotate(${dogValue});}
    }

    #dog {
      -webkit-animation: rotate 5s infinite alternate ease-in-out;
    }
  `;

  // Insert the keyframe animation into the CSSOM
  window.document.head.appendChild(rotateAnimation);
}

Utilisation

Vous pouvez utiliser cette fonction pour mettre à jour continuellement les images clés de rotation avec des valeurs aléatoires. Par exemple, vous pourriez avoir un bouton qui déclenche un événement de clic pour générer de nouveaux degrés aléatoires et mettre à jour les images clés en conséquence.

N'oubliez pas de remplacer dogValue par la valeur de votre degré générée aléatoirement.

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!