使用動(dòng)畫(huà)時(shí)，必須確保每個(gè)人都可以存取它們。根據(jù) WCAG SC 2.2.2：暫停、停止、隱藏，使用者必須能夠暫停、停止或隱藏持續(xù)超過(guò) 5 秒的動(dòng)畫(huà)。讓我們?cè)敿?xì)介紹如何使用 CSS 和 JavaScript 建立使用者可以控制的動(dòng)畫(huà)。

一個(gè)簡(jiǎn)單的動(dòng)畫(huà)

我們將首先使用 CSS 關(guān)鍵影格建立一個(gè)簡(jiǎn)單的動(dòng)畫(huà)。該動(dòng)畫(huà)在螢?zāi)簧纤揭苿?dòng)一個(gè)框。

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

新增播放狀態(tài)

接下來(lái)，我們介紹animation-play-state屬性。該屬性允許我們控制動(dòng)畫(huà)是運(yùn)行還是暫停。我們使用 CSS 變數(shù) --play-state 來(lái)設(shè)定動(dòng)畫(huà)的預(yù)設(shè)狀態(tài)。

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

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

在這裡，我們?cè)诟鶎蛹?jí)定義了一個(gè) --play-state 變量，並將其初始值設(shè)為 running。動(dòng)畫(huà)最初會(huì)運(yùn)行，但這個(gè)變數(shù)為我們提供了稍後控制它的方法。

使用 javascript 新增控件

我們新增了一個(gè)按鈕，讓使用者可以透過(guò)更新 --play-state 變數(shù)來(lái)暫停/播放動(dòng)畫(huà)

<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 來(lái)取得 --play-state 變數(shù)的目前值。根據(jù)動(dòng)畫(huà)是運(yùn)行還是暫停，我們切換值並相應(yīng)地更新按鈕的文字。

您可以在codepen上找到完整的工作範(fàn)例

透過(guò)實(shí)施動(dòng)畫(huà)播放狀態(tài)等簡(jiǎn)單的解決方案並提供動(dòng)畫(huà)控件，您可以幫助創(chuàng)建更具包容性的數(shù)位體驗(yàn)。

以上是使用動(dòng)畫(huà)播放狀態(tài)暫停、停止和隱藏動(dòng)畫(huà)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！