如何使用 JavaScript 將參數傳遞給 CSS 動畫？

使用JavaScript 將參數傳遞給CSS 動畫

在現代Web 開發中，CSS 動畫在為使用者介面帶來動態效果和互動方面發揮著至關重要的作用。但是，當您想要根據外部資料或使用者輸入動態控制動畫屬性時，它可能會受到限制。

考慮以下 CSS 動畫程式碼：

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

此動畫將元素滑動進行動畫處理從右側進入。但是，左邊距和寬度值是硬編碼的。如果我們想根據特定要求自訂這些值，我們需要一種方法將它們作為參數傳遞。

引入 CSS 變量，這是一個強大的功能，允許我們使用 JavaScript 操作 CSS 屬性。透過 CSS 變量，我們可以實現動態動畫參數化，如下所示：

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

注意動畫中 var(--m, 0%) 和 var(--w, 100%) 的使用。在JavaScript 中，我們現在可以將這些變數設定為所需的值並觸發動畫：

document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

這個簡單的JavaScript 程式碼為類別「p2」的元素設定--m 和--w 變數。結果，元素將以指定的 margin-left 和 width 值從右側滑入。

透過結合 CSS 變數和 JavaScript，我們現在可以透過程式控制動畫參數，為動態效果開闢了無限可能。和響應式使用者介面。

以上是如何使用 JavaScript 將參數傳遞給 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！