如何使用 JavaScript 設定過渡效果的起始時間？

在本教程中，我們將學習如何使用 JavaScript 設定過渡效果的起始時間。要設定過渡效果的起始時間，可以使用 JavaScript 的 `transitionDelay` 屬性。

為了建立互動式元件，我們通常會使用過渡效果。讓我們深入探討一下如何設定過渡效果的起始時間。

使用 Style transitionDelay 屬性

使用 `style.transitionDelay` 屬性，我們可以設定或返回過渡效果的起始時間。我們可以用秒 (s) 或毫秒 (ms) 來指定 `transitionDelay` 的值。延遲可以是負數、正數或零。

使用負值的過渡延遲，過渡效果會立即開始。使用者會看到動畫好像提前出現。使用正值的過渡延遲，過渡效果會在指定時間後開始。使用零值的過渡延遲，過渡效果會立即開始。

我們也可以指定多個延遲值。如果我們給出兩個 `transitionDelay` 值，第一個值會影響第一個過渡屬性，第二個值會影響第二個過渡屬性。

如果我們沒有指定 `transitionDelay`，動畫會在元素懸停時開始。

使用者可以按照以下語法使用 `transitionDelay` 屬性。

語法

object.style.transitionDelay = "time|initial|inherit"

以上語法將所需的過渡延遲設定到元素的樣式中。

引數

  • time − 定義在過渡開始前等待的時間。
  • initial − 將此屬性設定為其預設值。
  • inherit − 從其父元素繼承此屬性。

`transitionDelay` 屬性的預設值為 0。返回值是一個字串，表示元素的 `transitionDelay` 屬性。

示例 1

您可以嘗試執行以下程式碼，學習如何使用 JavaScript 返回過渡效果的起始時間。

<!DOCTYPE html>
<html>
<head>
   <style>
      #div1 {
         position: relative;
         margin: 10px;
         height: 300px;
         width: 400px;
         padding: 20px;
         border: 2px solid blue;
      }
      #div2 {
         padding: 80px;
         position: absolute;
         border: 2px solid BLUE;
         background-color: yellow;
         transform: rotateY(45deg);
         transition: all 5s;
      }
      #div2:hover {
         background-color: orange;
         width: 50px;
         height: 50px;
         padding: 100px;
         border-radius: 50px;
      }
   </style>
</head>
<body>
   <p>Hover over DIV2</p>
   <button onclick = "display()">Set</button>
   <div id = "div1">DIV1
   <div id = "div2">DIV2</div>
   </div>
   <script>
      function display() {
         document.getElementById("div2").style.transitionTimingFunction = "easein";
         document.getElementById("div2").style.transitionDelay = "1s";
      }
   </script>
</body>
</html>

示例 2

在這裡，我們將不同的過渡延遲設定到三個元素上。當用戶按下按鈕時，我們呼叫函式使用上述語法設定過渡延遲。

在使用者點選按鈕之前，元素沒有過渡延遲。但是動畫會在滑鼠懸停或觸控時開始。

<html>
<head>
   <style>
      .trans{
         width: 90px;
         height: 90px;
         background-color: #5F9EA0;
         border: 5px dotted black;
         display: inline-block;
         margin-right: 15px;
         color: #FFFFFF;
      }
      .trans:hover{
         height: 200px;
      }
      #trans1{
         transition-duration: 5s;
      }
      #trans2{
         transition-duration: 2s;
         background-color: #4682B4;
      }
      #trans3{
         transition-duration: 400ms;
         background-color: #DA70D6;
      }
   </style>
</head>
<body>
   <h2> Set when the transition starts using <i> the transitionDelay property. </i></h2>
   <div class = "trans" id = "trans1"> No delay </div>
   <div class = "trans" id = "trans2"> Nodelay </div>
   <div class = "trans" id = "trans3"> No delay </div>
   <div id = "transDelBtnWrap">
      <p> Click on the button and touch or mouse over the boxes to set
      the transition delay. </p>
      <button onclick = "setTransitionDelay();"> Set </button>
   </div>
</body>
<script>
   function setTransitionDelay(){
      var transDelBtnWrap = document.getElementById("transDelBtnWrap");
      var transDelEl1 = document.getElementById("trans1");
      var transDelEl2 = document.getElementById("trans2");
      var transDelEl3 = document.getElementById("trans3");
      transDelEl1.style.transitionDelay = "-1s";
      transDelEl1.innerHTML = "-1s delay";
      transDelEl2.style.transitionDelay = "2s";
      transDelEl2.innerHTML = "2s delay";
      transDelEl3.style.transitionDelay = "900ms";
      transDelEl3.innerHTML = "900ms delay";
   }
</script>
</html>

示例 3

在這個程式中，我們按順序將多個不同的過渡延遲設定到不同的元素上。

當用戶按下按鈕時，我們呼叫函式使用上述語法設定過渡延遲。

<html>
<head>
   <style>
      #fader td{
         background-color: grey;
         transition-timing-function: cubic-bezier(1,0,1,0);
         transition-duration: 0.5s;
      }
      #fader:hover #fade1{
         background-color: lavender;
      }
      #fader:hover #fade2{
         background-color: #5F9EA0;
      }
      #fader:hover #fade3{
         background-color: #4682B4;
      }
      #fader:hover #fade4{
         background-color: #1E90FF;
      }
      #fader:hover #fade5{
         background-color: #3CB371;
      }
   </style>
</head>
<body>
   <h2> The JavaScript program to set when the transition starts using
      <i> the transitionDelay property. </i>
   </h2>
   <table id = "fader" cellpadding = "10" cellspacing = "2">
      <tr>
         <td id = "fade1"> No delay </td>
         <td id = "fade2"> No delay </td>
         <td id = "fade3"> No delay </td>
         <td id = "fade4"> No delay </td>
         <td id = "fade5"> No delay </td>
      </tr>
   </table>
   <div id="usrTransBtnWrap">
      <p>Click on the button and touch or mouse over any one box to set
      sequential multiple transition delay.</p>
      <button onclick="setSequenceDelay();">Set</button>
   </div>
</body>
<script>
   function setSequenceDelay(){
      var usrTransBtnWrap = document.getElementById("usrTransBtnWrap");
      usrTransBtnWrap.style.display = "none";
      var usrTransEl1 = document.getElementById("fade1");
      var usrTransEl2 = document.getElementById("fade2");
      var usrTransEl3 = document.getElementById("fade3");
      var usrTransEl4 = document.getElementById("fade4");
      var usrTransEl5 = document.getElementById("fade5");
      usrTransEl1.style.transitionDelay = "0s,5s";
      usrTransEl1.innerHTML = "0s,5s";
      usrTransEl2.style.transitionDelay = "5s,10s";
      usrTransEl2.innerHTML = "5s,10s";
      usrTransEl3.style.transitionDelay = "10s,15s";
      usrTransEl3.innerHTML = "10s,15s";
      usrTransEl4.style.transitionDelay = "15s,20s";
      usrTransEl4.innerHTML = "15s,20s";
      usrTransEl5.style.transitionDelay = "20s,25s";
      usrTransEl5.innerHTML = "20s,25s";
   }
</script>
</html>

在本教程中，我們學習了 JavaScript 中的 `transitionDelay` 屬性，用於指定過渡效果的起始時間。

實現非常簡單，因為它是一個 JavaScript 內建屬性。

更新於：2022年10月25日

2K+ 瀏覽量

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告