Anhalten, Stoppen und Ausblenden von Animationen mit Animation-Play-State

Bei der Arbeit mit Animationen ist es wichtig sicherzustellen, dass sie für jedermann zugänglich sind. Gemäß WCAG SC 2.2.2: Pause, Stop, Hide müssen Benutzer in der Lage sein, Animationen, die länger als 5 Sekunden dauern, anzuhalten, zu stoppen oder auszublenden. Sehen wir uns an, wie Sie mit CSS und JavaScript eine Animation erstellen können, die Benutzer steuern können.

Eine einfache Animation

Wir beginnen mit der Erstellung einer einfachen Animation mithilfe von CSS-Keyframes. Diese Animation bewegt ein Kästchen horizontal über den Bildschirm.

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Wiedergabestatus hinzufügen

Als nächstes stellen wir die Eigenschaft „animation-play-state“ vor. Mit dieser Eigenschaft können wir steuern, ob die Animation ausgeführt oder pausiert wird. Wir verwenden eine CSS-Variable, --play-state, um den Standardstatus der Animation festzulegen.

:root {
  --play-state: running;
}

.animated-box {
  animation-play-state: var(--play-state);
}

Hier definieren wir eine Variable „--play-state“ auf der Root-Ebene und setzen ihren Anfangswert auf „Running“. Die Animation wird zunächst ausgeführt, aber diese Variable gibt uns die Möglichkeit, sie später zu steuern.

Steuerung mit Javascript hinzufügen

Wir fügen eine Schaltfläche hinzu, mit der Benutzer die Animation anhalten/abspielen können, indem sie die Variable --play-state aktualisieren

<button id="toggle-btn">Pause Animation</button>

<script>
  const toggleButton = document.getElementById('toggle-btn');
  const root = document.documentElement;

  toggleButton.addEventListener('click', () => {
    const currentPlayState = getComputedStyle(root).getPropertyValue('--play-state').trim();

    if (currentPlayState === 'running') {
      root.style.setProperty('--play-state', 'paused');
      toggleButton.textContent = 'Resume Animation';
    } else {
      root.style.setProperty('--play-state', 'running');
      toggleButton.textContent = 'Pause Animation';
    }
  });
</script>

Wir verwenden getComputedStyle, um den aktuellen Wert der Variablen --play-state abzurufen. Je nachdem, ob die Animation läuft oder pausiert, schalten wir den Wert um und aktualisieren auch den Text der Schaltfläche entsprechend.

Das vollständige Arbeitsbeispiel finden Sie auf Codepen

Durch die Implementierung einfacher Lösungen wie Animation-Play-State und die Bereitstellung von Steuerelementen für Animationen tragen Sie dazu bei, ein umfassenderes digitales Erlebnis zu schaffen.

Das obige ist der detaillierte Inhalt vonAnhalten, Stoppen und Ausblenden von Animationen mit Animation-Play-State. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!