使用具有不同父級的 SASS mixin 的增量轉換延遲

Question

我想將過渡延遲自動增加到任何類名為“animate”的元素上，我的問題是我的“animate”類有不同的父類。 有沒有辦法使用 SASS mixin 自動遞增而不管父級？

<div class="top-level">
  <div class="first-parent">
      <h1 class="animate">Require a transition-delay of 0.25</h1>
      <p class="animate">Require a transition-delay of 0.5</p>
  </div>
  <div class="second-parent">
      <div class="random-div">
          <div class="animate">Require a transition-delay of 0.75</div>
      </div>
  </div>
</div>

提前致謝

Answer 1

我想你可能不得不用替代品來代替。

這是一種使用 Sass 變量的方法，在@for循環內以 0.25 遞增。 這需要在 HTML 中手動設置類名，即.animate-1 、 .animate-2等：

$counter: 0.25;

@for $i from 1 through 3 {
  $counter: $counter + 0.25;

  .animate-#{$i} {
    transition-delay: $counter + s;
  }
}

另一種方法是使用 JS，因此您不必更改 HTML：

 const animate = document.querySelectorAll('.animate'); let increment = 0.25; animate.forEach((i, index) => { i.style.transitionDelay = increment + 's'; increment += 0.25; console.log(`element ${index + 1} transition-delay: `, i.style.transitionDelay); })

 <div class="top-level"> <div class="first-parent"> <h1 class="animate">Require a transition-delay of 0.25</h1> <p class="animate">Require a transition-delay of 0.5</p> </div> <div class="second-parent"> <div class="random-div"> <div class="animate">Require a transition-delay of 0.75</div> </div> </div> </div>