SASS，为每个列表项设置延迟动画

Question

正在寻找一个好的 mixin 以减少我的文件中的代码。动画非常简单，每个列表项在触发时都会从左侧滑入并延迟（每个元素）。 'transition' mixin 是一个基本的过渡（所有供应商）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 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);
}

此致:)

SASS，为每个列表项设置延迟动画

SASS, animate each list items with a delay

css

sass

mixins