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

开启您的 职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.