Question

所以，我一直在搞乱在CSS中创建一些代码，这是一个为一个元素设置的动画列表。它基本上只是一个循环，但我需要能够改变每次循环的时间。基本上，我想要一些简单的东西：

$intro-duration:1s;
$intro-delay:6.5s;
$intro-separation:0.7s;
$intro-style:ease;

@mixin intro($multiplier) {
-webkit-animation:intro $intro-duration $intro-separation*$multiplier+$intro-delay $intro-style;
}

.intro {
   @include intro(-1);
   @include intro(0);
   @include intro(1);
   @include intro(2);
   @include intro(3);
}

但有了这个，它就像是：

.intro {
  -webkit-animation: intro 1s 5.8s ease;
  -webkit-animation: intro 1s 6.5s ease;
  -webkit-animation: intro 1s 7.2s ease;
  -webkit-animation: intro 1s 7.9s ease;
  -webkit-animation: intro 1s 8.6s ease;
}

哪个都好，花花公子，但我显然需要能够省去“-webkit-animation”以及分号代替逗号，以便正确组合动画字符串。所以需要这样：

.intro {
  -webkit-animation: 
  intro 1s 5.8s ease,
  intro 1s 6.5s ease,
  intro 1s 7.2s ease,
  intro 1s 7.9s ease,
  intro 1s 8.6s ease; }

我完全觉得我真的只是让它复杂化并且觉得如果我只是离开它几个小时，我会想出解决方案，但我尝试了一些不同的东西我很快就会出现。任何有关简化此代码的帮助都将非常感激！

编辑：删除了几行重复代码，试着保持简单。

Answer 1

您需要创建一个列表：

@mixin intro($multiplier...) {
  $collector: ();
  @each $i in $multiplier {
    $collector: append($collector, intro $intro-duration $intro-separation* $i+ $intro-delay $intro-style, comma);
  }
  animation: $collector;
}

.intro {
  @include intro(-1, 0, 1, 2, 3);
}

可替换地：

@mixin intro($start, $end) {
  $collector: ();
  @for $i from $start through $end {
    $collector: append($collector, intro $intro-duration $intro-separation* $i+ $intro-delay $intro-style, comma);
  }
  animation: $collector;
}

.intro {
  @include intro(-1, 3);
}

并确保您提供所有前缀（视情况而定）+非前缀属性，而不仅仅是webkit前缀。

使用Sass创建动态动画列表

1 个答案: