使用具有不同父级的 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>