Mettre en pause, arrêter et masquer des animations avec l'état de lecture d'animation

Lorsque vous travaillez avec des animations, il est essentiel de s’assurer qu’elles sont accessibles à tous. Selon WCAG SC 2.2.2 : Pause, Stop, Hide, les utilisateurs doivent pouvoir mettre en pause, arrêter ou masquer les animations qui durent plus de 5 secondes. Voyons comment vous pouvez utiliser CSS et JavaScript pour créer une animation que les utilisateurs peuvent contrôler.

Une animation simple

Nous allons commencer par créer une animation simple à l'aide d'images clés CSS. Cette animation déplace une boîte horizontalement sur l'écran.

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

Ajout d'un état de lecture

Ensuite, nous introduisons la propriété animation-play-state. Cette propriété nous permet de contrôler si l'animation est en cours d'exécution ou en pause. Nous utilisons une variable CSS, --play-state, pour définir l'état par défaut de l'animation.

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

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

Ici, nous définissons une variable --play-state au niveau racine et définissons sa valeur initiale sur running. L'animation s'exécutera initialement, mais cette variable nous donne un moyen de la contrôler plus tard.

Ajout de contrôle avec javascript

Nous ajoutons un bouton qui permet aux utilisateurs de mettre en pause/lire l'animation en mettant à jour la variable --play-state

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

Nous utilisons getComputedStyle pour obtenir la valeur actuelle de la variable --play-state. Selon que l'animation est en cours d'exécution ou en pause, nous changeons la valeur et mettons également à jour le texte du bouton en conséquence.

Vous pouvez trouver l'exemple de travail complet sur codepen

En mettant en œuvre des solutions simples comme animation-play-state et en fournissant des contrôles pour les animations, vous contribuez à créer une expérience numérique plus inclusive.

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!