有沒有更好的方法在一段時間后顯示內容包裝器的每個元素？-有解無憂

我想content-wrapper在一段時間后顯示每個 div 。
我目前使用這些el1, el2, el3, ...類來實作這個目標。但是我的一些content-wrappers有多個元素，這使得它不那么優雅，因為每個類都必須是獨一無二的。有沒有更好的方法來實作這一點，例如通過使用el內容包裝器 div 的每個子元素共有的類。

我目前有這個html和js。

<div class="content-wrapper">
   <div class="el el1">1</div>
   <div class="el el2">2</div>
   <div class="el el3">3</div>
</div>

function display_elt(elt_class, time){
   setTimeout(function(){
       document.querySelector(elt_class);
   }, time)
}

var time_int = 0; 
divs = ['elt1', 'elt2', 'elt3'];
for (let i = 0; i < divs.length; i  ) {
  time_int   = 0.5;
  function display_elt(divs[i], time_int);
}

歡迎使用 CSS、Javascript 或 JQuery 的解決方案。

uj5u.com熱心網友回復：

只使用純純 CSS

所有代碼都被注釋了。

有用的檔案：

CSS 變數 MDN 檔案
CSS calc()MDN 檔案
CSSforwards影片填充模式

* {
  /* this is a css variable */
  --delay: 0.5s;
}

.el {
  /* hidden by default */
  opacity: 0;
  /* shorthand -> name duration timing-function fill-mode */
  animation: fadeIn 0.5s linear forwards;
  /* the real trick is here */
  animation-delay: calc(var(--delay) * var(--i));
  /*el1 -> 0.5s * 0 = 0 */
  /*el2 -> 0.5s * 1 = 0.5s */
  /*el3 -> 0.5s * 2 = 1s */
}

@keyframes fadeIn {
  from {
    /* is not visible*/
    opacity: 0;
  }
  to {
    /* is visible */
    opacity: 1;
  }
}

<div class="content-wrapper">
  <!-- 0 -->
  <div style="--i: 0;" class="el el1">1</div>
  <!-- 1 -->
  <div style="--i: 1;" class="el el2">2</div>
  <!-- 2 -->
  <div style="--i: 2;" class="el el3">3</div>
  <!-- if more elements, increase the --i css variable for next elements -->
</div>

uj5u.com熱心網友回復：

您的代碼有一些問題。首先，您似乎在選擇元素，但您沒有對它做任何事情。

其次，您的代碼中有幾個語法錯誤：function關鍵字使用不正確、參考錯誤變數等。

以下是您需要進行的更正：

function display_elt(elt_class, time){
   setTimeout(function(){
       document.querySelector('.' elt_class).hidden = false; // make the element NOT hidden
   }, time)
}

var time_int = 0; 
var divs = ['el1', 'el2', 'el3'];
for (let i = 0; i < divs.length; i  ) { // use 'divs.length' (which is 3 not 4)
  time_int   = 0.5;
  display_elt(divs[i], time_int); // call the function with 'divs[i]'
}

在您的 html 中，只需將每個元素設定為最初隱藏

<div class="content-wrapper">
   <div class="el el1" hidden>1</div>
   <div class="el el2" hidden>2</div>
   <div class="el el3" hidden>3</div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/406139.html

標籤：

上一篇：為什么這兩個SQL查詢回傳的行數不同？

下一篇：Ajax實時搜索-Onclick填充輸入值