Search code examples
csssassmixins

SASS, animate each list items with a delay

Looking for a nice mixin to have less code in my files. The animation is pretty simple, each list item when triggered will slide in from the left with a delay(per element). The 'transition' mixin is a basic transition(all vendors) mixin.

.nav-main{

     li:nth-of-type(1) a{             

       @include transition( 0.5s linear 0.5s);

     }

     li:nth-of-type(2) a{


       @include transition( 0.5s linear 0.6s);

     } 

     li:nth-of-type(3) a{


       @include transition( 0.5s linear 0.7s);

     }

     li:nth-of-type(4) a{


       @include transition( 0.5s linear 0.8s);

     }

     li:nth-of-type(5) a{


       @include transition( 0.5s linear 0.9s);

     }

// and so on...

  }
Solution

  • You can use a for loop to achieve this.

    .nav-main{
  @for $i from 1 through 5 {
    li:nth-of-type(#{$i}) a {
      @include transition(0.5s linear (0.5s + ($i - 1) * 0.1s));
    }
  }
}