使用動畫播放狀態暫停、停止和隱藏動畫

使用動畫時，必須確保每個人都可以存取它們。根據 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中文網其他相關文章！