SASS，延迟动画化每个列表项目

Question

寻找一个很好的混音，以减少我的文件中的代码。动画非常简单，每个列表项在触发时都会从左侧滑入（每个元素）。 '过渡'混合是一个基本的过渡（所有供应商）混合。

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

您可以使用for loop来实现此目的。

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

Answer 2

我准备的mixin可以用于其他情况。

@mixin nthChildNav($item, $count) { 
    $a-delay: 0.5s; 
    $a-duration: 0.5s; 

    @for $i from 1 through $count { 
     #{$item}:nth-of-type(#{$i}) { 
      a { 
       @include transition($a-delay linear ($a-duration + ($i - 1) * 0.1)); 
      } 
     } 
     // @debug $i; 
    } 
} 

.nav-main { 
    @include nthChildNav(li, 5); 
} 

问候:)