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

Only other option I can think of is adding different numbers to your class names: `.animate-1 .animate-2 etc.`, then iterating through them with a `@for` loop — Daniel_Knights, Aug 23 '20 at 23:49
Otherwise, you'd have to manually increment based off the parent by passing arguments to a mixin — Daniel_Knights, Aug 23 '20 at 23:52

score 0 · Answer 1 · answered Aug 24 '20 at 02:49

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, i.e. .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>

Thanks for taking a look Daniel_Knights, I appreciate it. Looks like JS is the way forward. — Ryan, Aug 24 '20 at 15:31

Incremental transition-delay using SASS mixins with different parents

1 Answers1