使用动画播放状态暂停、停止和隐藏动画

使用动画时，必须确保每个人都可以访问它们。根据 WCAG SC 2.2.2：暂停、停止、隐藏，用户必须能够暂停、停止或隐藏持续超过 5 秒的动画。让我们详细介绍一下如何使用 CSS 和 JavaScript 创建用户可以控制的动画。

一个简单的动画

我们将首先使用 CSS 关键帧创建一个简单的动画。该动画在屏幕上水平移动一个框。

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

添加播放状态

接下来，我们介绍animation-play-state属性。该属性允许我们控制动画是运行还是暂停。我们使用 CSS 变量 --play-state 来设置动画的默认状态。

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

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

在这里，我们在根级别定义了一个 --play-state 变量，并将其初始值设置为 running。动画最初会运行，但这个变量为我们提供了稍后控制它的方法。

使用 javascript 添加控件

我们添加了一个按钮，允许用户通过更新 --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>

我们使用 getCompulatedStyle 来获取 --play-state 变量的当前值。根据动画是运行还是暂停，我们切换值并相应地更新按钮的文本。

您可以在codepen上找到完整的工作示例

通过实施动画播放状态等简单的解决方案并提供动画控件，您可以帮助创建更具包容性的数字体验。

以上是使用动画播放状态暂停、停止和隐藏动画的详细内容。更多信息请关注PHP中文网其他相关文章！