Incremental transition-delay using SASS mixins with different parents

Question

I am wanting to auto increment a transition-delay onto any element with a class name 'animate', my issue is where my 'animate' classes have different parents. Is there a way to use a SASS mixin to auto-increment regardless of parent?

<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>

Thanks in advance

Answer 1

I think you might have to make do with a substitute instead.

Here's a way using a Sass variable, incrementing by 0.25 inside a @for loop. This requires manually setting class names in your HTML, ie .animate-1 , .animate-2 etc.:

$counter: 0.25;

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

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

Another way is using JS so you don't have to alter the 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>