user759235 user759235 - 3 months ago 12
Sass (Sass) Question

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

}

Answer

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));
    }
  }
}
Comments