infinite scss class loop-CodePudding

i have this code for 5 item classes

  @for $num from 1 through 5 {
    .item-#{$num} {
      transform-origin: top center;
      animation: rotateX 300ms ($num * 60ms) ease-in-out forwards;
    }
    .item-#{$num}   .item-last {
      transform-origin: top center;
      animation: rotateX 300ms (($num   1) * 60ms) ease-in-out forwards;
    }
  }

but when i create 6 or more items it doent work..

how can i make it infinite? or may be some different way.

thx who answer it.

CodePudding user response：

Better to use JS for a use case like this. It will work with however many divs you have (infinite like you want) but it will not bloat your stylesheet to infinite file size. I had to guess a little bit about your HTML structure.

document.querySelectorAll("[class^='item-']").forEach((item, index) => {
   item.style.animation = `rotateX 300ms ${index * 60}ms ease-in-out forwards`;
   const nextSibling = item.nextElementSibling;
   if(nextSibling){
     nextSibling.style.animation = `rotateX 300ms ${(index   1) * 60}ms ease-in-out forwards`;
   }
})

[class^=item-] {
      height: 40px;
      width: 40px;
      background: blue;
      transform-origin: top center;
}

.last-item {
      height: 40px;
      width: 40px;
      background: pink;
      transform-origin: top center;
}

@keyframes rotateX {
 0% {
  transform: rotate(0deg);
 }
 
 100% {
  transform: rotate(-90deg);
 }

}

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>

CodePudding user response：

you can make just

  @for $num from 1 through 999999 {
    .item-#{$num} {
      transform-origin: top center;
      animation: rotateX 300ms ($num * 60ms) ease-in-out forwards;
    }
    .item-#{$num}   .item-last {
      transform-origin: top center;
      animation: rotateX 300ms (($num   1) * 60ms) ease-in-out forwards;
    }
  }

it will work