如何使用 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+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告