Wie kann ich JavaScript-Variablen verwenden, um WebKit-Keyframe-Werte dynamisch festzulegen?

Verwenden Sie JavaScript, um Webkit-Keyframes-Werte mit Variablen festzulegen

Sie stehen vor einer häufigen Herausforderung, wenn Sie versuchen, in JavaScript generierte Zufallswerte für zu verwenden CSS-Animationen. JavaScript-Variablen können nicht direkt in CSS-Keyframes eingefügt werden.

Stattdessen müssen Sie die CSS-Regeln dynamisch über JavaScript erstellen und in das CSS Object Model (CSSOM) einfügen.

Dynamisch Keyframe-Erstellung

Folgen Sie diesen Schritten, um Keyframes zu erstellen und zu bearbeiten dynamisch:

1. Erstellen Sie das gewünschte Keyframe-Animationsobjekt mit der Methode window.document.createElement(). Dieses Objekt dient als Container für Ihre Keyframe-Definitionen.
2. Definieren Sie die tatsächlichen Keyframes mit der Methode keyframes.insertRule(). Diese Methode benötigt zwei Parameter: den Keyframe-Prozentsatz und die CSS-Regeln für diesen Prozentsatz.
3. Fügen Sie die neu erstellte Keyframe-Animation mit der Methode sheet.insertRule() in das CSSOM ein.

Beispiel

Hier ist ein Beispiel, das dynamisch eine vorhandene Keyframe-Animation mit zufälliger Rotation erstellt und überschreibt Werte:

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);
}

Verwendung

Mit dieser Funktion können Sie die Rotations-Keyframes kontinuierlich mit zufälligen Werten aktualisieren. Sie könnten beispielsweise eine Schaltfläche haben, die ein Klickereignis auslöst, um neue zufällige Grade zu generieren und die Keyframes entsprechend zu aktualisieren.

Denken Sie daran, dogValue durch Ihren zufällig generierten Gradwert zu ersetzen.

Das obige ist der detaillierte Inhalt vonWie kann ich JavaScript-Variablen verwenden, um WebKit-Keyframe-Werte dynamisch festzulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!