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

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

您可以使用一个

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

---

我准备的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);
}

问候：）

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