如何使用 JavaScript 設定四個過渡屬性？

在本教程中，我們將學習如何使用 JavaScript 設定四個過渡屬性。

過渡是一個 CSS 屬性，用於設定元素的過渡效果。它是以下屬性的簡寫：transitionProperty、transitionDuration、transitionTimingFunction 和 transitionDelay。

transitionProperty 用於指定應該具有過渡效果的 CSS 屬性名稱。transitionDuration 屬性用於指定完成過渡的總時間。transitionTimingFunction 用於指定過渡的速度曲線。transitionDelay 用於指定過渡將在多長時間後開始。

要使用 JavaScript 設定四個過渡屬性，有多種方法，在本教程中，我們將討論其中兩種：

  • 使用 `style.transition` 屬性

  • 使用 `style.setProperty()` 方法

使用 style.transition 屬性

在 JavaScript 中，元素的 style.transition 屬性用於設定元素的四個過渡屬性。由於 style.transition 屬性在元素物件中可用，我們首先需要使用 `document.getElementById()` 方法訪問元素物件，然後使用此屬性來設定四個過渡屬性。

語法

const object = document.getElementById('id')
object.style.transition = transitionProperty transitionDuration transitionTimingFunction transitionDelay | inherit | initial

在上面的語法中，`document.getElementById()` 方法用於訪問具有 id 屬性為“id”的 HTML 元素的元素物件，然後我們設定 `style.transition` 屬性。

引數

  • transitionProperty − 應該具有過渡效果的屬性名稱。

  • transitionDuration − 完成過渡效果的總時間。

  • transitionTimingFunction − 過渡效果的速度曲線。

  • transitionDelay − 開始過渡效果的時間延遲。

  • inherit − 過渡屬性由其父元素繼承。

  • initial − 過渡屬性設定為預設值。

示例

在下面的示例中，我們使用了 `style.transition` 屬性來使用 JavaScript 設定四個過渡屬性。我們使用了一個按鈕“設定過渡”，其點選事件用於執行“setTransition()”函式，該函式為多個元素設定過渡效果。

<html>
<head>
   <style>
      .transition {
         padding: 10px;
         margin: 5px 0px;
         border: 1px solid gray;
         background-color: aliceblue;
         width: 30%;
      }
      .transition:hover {
         width: 90%;
      }
   </style>
</head>
<body>
   <h2>Using the style.transition Property</h2>
   <p>Please Hover over the DIVs to see the transition before and after clicking the "Set Transition" button.</p>
   <button onclick="setTransition()"> Set Transition </button>
   <div>
      <div id="element1" class="transition"> transition: width 2s linear 1s </div>
      <div id="element2" class="transition"> transition: all 1s ease-in 0.1s </div>
      <div id="element3" class="transition"> transition: all 0.1s ease-out 0.1s </div>
   </div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      
      // 'Set Transition' button click event handler function
      function setTransition() {
         element1.style.transition = 'width 1s linear 1s'
         element2.style.transition = 'all 1s ease-in 0.1s'
         element3.style.transition = 'all 0.1s ease-out 0.1s'
      }
   </script>
</body>
</html>

使用 style.setProperty() 方法

在 JavaScript 中，`style.setProperty` 方法設定元素的屬性，無論是新的還是現有的。也可以使用此方法設定過渡屬性。首先，使用 `document.getElementById()` 方法訪問元素，然後使用 `style.setProperty` 方法設定“transition”屬性。在 `style.setProperty` 方法的屬性名稱引數中，應為“transition”，值和優先順序將根據使用者的需求而定。

語法

const object = document.getElementById('id')
object.style.setProperty(property_name, value, priority)

在上面的語法中，`document.getElementById()` 方法用於訪問具有 id 屬性為“id”的 HTML 元素的元素物件，然後我們在該元素物件上使用 `style.setProperty` 方法。

引數

  • property_name − 要設定的屬性的名稱。

  • value − 屬性的新值。

  • priority − 屬性值的優先順序（可選）。

示例

在下面的示例中，我們使用了 `style.setProperty` 方法來使用 JavaScript 設定四個過渡屬性。我們使用了四個輸入欄位來獲取使用者對過渡的四個屬性的輸入：transitionProperty、transitionDuration、transitionTimingFunction 和 transitionDelay。一個按鈕“設定過渡”與一個點選事件關聯，該事件執行“setTransition()”函式，該函式設定元素的四個過渡屬性。

<html>
<head>
   <style>
      #root {
         padding: 20px;
         margin: 5px 0px;
         border: 1px solid black;
         background-color: aliceblue;
         width: 30%;
      }

      #root:hover {
         width: 90%;
         background-color: aqua;
      }

      label {
         margin-right: 5px;
         font-weight: bold;
      }

      .input-field {
         margin-bottom: 5px;
      }
   </style>
</head>
<body>
   <h2>Using <i> style.setProperty() </i> method with JavaScript</h2>
   <p> Please Hover over the below box to see the transition before and after clicking the "Set Transition" button.</p>
   <h4>Enter the four properties of transition:</h4>
   <div>
      <div class="input-field">
         <label for="transitionProperty"> transitionProperty: </label>
         <input id="transitionProperty" type="text" name="transitionProperty" value="all">
      </div>
      <div class="input-field">
         <label for="transitionDuration"> transitionDuration: </label>
         <input id="transitionDuration" type="text" name="transitionDuration" value="2s">
      </div>
      <div class="input-field">
         <label for="transitionTimingFunction"> transitionTimingFunction: </label>
         <input id="transitionTimingFunction" type="text" name="transitionTimingFunction" value="linear">
      </div>
      <div class="input-field">
         <label for="transitionDelay"> transitionDelay: </label>
         <input id="transitionDelay" type="text" name="transitionDelay" value="0.2s">
      </div>
   </div>
   <button onclick="setTextDecoration()"> Set Transition </button>
   <div id="root"> Welcome to Tutorialspoint! </div>
   <script>
      function setTextDecoration() {
         const root = document.getElementById('root')
         
         // All input fields' value
         const transitionProperty = document.getElementById('transitionProperty').value
         const transitionDuration = document.getElementById('transitionDuration').value
         const transitionTimingFunction = document.getElementById('transitionTimingFunction').value
         const transitionDelay = document.getElementById('transitionDelay').value
         root.style.setProperty('transition', transitionProperty + ' ' + transitionDuration + ' ' + transitionTimingFunction + ' ' + transitionDelay)
      }
   </script>
</body>
</html>

在單擊“設定過渡”按鈕之前，沒有輸入欄位值，則元素懸停時的過渡不會產生過渡效果。

單擊“設定過渡”按鈕並輸入欄位值後，根據輸入欄位的值，在懸停元素時會發生過渡效果。

在本教程中，我們討論了兩種使用 JavaScript 設定四個過渡屬性的方法。第一種方法是使用 `style.transition` 屬性，另一種方法是使用 style.setProperty() 方法。

更新於：2022年11月11日

4K+ 瀏覽量

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.