Question

我有什么：

.test{
  @include transition("all .5s");
}

$animationFn: "ease-in-out";
@mixin transition($transition){
  backface-visibility: hidden;
  transition: unquote($transition) unquote($animationFn);
}

这会产生：

.test{
  backface-visibility: hidden;
  transition: all .5s ease-in-out;
}

哪个好。但是，我也有这种情况，我想命名多个转换，例如：

.test{
  @include transition("font-size .5s, color .5s");
}

在这种情况下我会期待：

.test{
  backface-visibility: hidden;
  transition: font-size .5s ease-in-out, color .5s ease-in-out;
}

我的mixin有什么必要使它能用多个转换语句，用逗号分隔？或者换句话说：如何在此混音中,和; transition之前注入动画功能？

Answer 1

这可以解决您的问题您想使用Sass' @each directive，并结合variable arguments和Sass' append function。

一步一步：

@mixin transition($transitions...){这告诉Sass你接受了不同数量的论点。问题是用逗号分隔你的不同转换，这与你现在正在做的不同。

$result : ();会创建一个空列表。

@each ...：我们正在迭代你的过渡列表。

$result : append($result, ..., comma);我们将插值字符串（unquote(...) unquote(...)）附加到$result，逗号分隔，并将其分配给$result。

transition : $result;我们正在使用插值字符串。

代码段：

$animationFn: "ease-in-out";
@mixin transition($transitions...){
  $result : ();
  @each $transition in $transitions{
    $result : append($result, unquote($transition) unquote($animationFn),comma);
  }
  backface-visibility: hidden;
  transition: $result;
}

.test{
  @include transition("all .5s");
}

.test2{
  @include transition("font-size .5s", "color .5s");
}

编辑：支持可选的动画功能

通过使用@if指令，您可以测试参数是否为空但是，因为变量参数必须是最后一个，所以必须将可选参数移到开头由于无法测试第一个参数是否是列表或可选参数的一部分，因此必须始终为动画函数提供第一个参数（它不是可选的）。但是，如果要保留默认值，只需传递一个空字符串。

$defaultAnimationFn: "ease-in-out";
@mixin transition($animationFn, $transitions...){
  @if $animationFn == "" {
    $animationFn : $defaultAnimationFn;
  }

  $result : ();
  @each $transition in $transitions{
    $result : append($result, unquote($transition) unquote($animationFn),comma);
  }

  backface-visibility: hidden;
  transition: $result;
}

.test{
  @include transition("","all .5s");
}

.test2{
  @include transition("linear","font-size .5s", "color .5s");
}

编辑2：添加了另一种将不同动画功能映射到不同过渡的方法

此版本利用了Sass的列表。您可以创建一个动画功能列表和另一个应用这些功能的过渡列表这里的限制是你需要在每个列表中提供完全相同数量的元素但是，您可以按照自己的方式编写过渡和动画功能空字符串默认为默认动画功能（在mixin范围之外定义）我们可能会更加防守，并为边缘案例添加更多测试和分支。只要你知道自己在做什么，它就不应该是必要的。

$defaultAnimationFn : "ease-in-out";

@mixin transitionMap($animationList, $transitionList){
  $result : ();

  @for $i from 1 through length($animationList) {
    $animationFn : nth($animationList, $i);
    @if $animationFn == "" {
      $animationFn : $defaultAnimationFn;
    }
    $result: append($result, unquote(nth($transitionList, $i)) unquote($animationFn) , comma);
  }

  backface-visibility: hidden;
  transition: $result;
}

.test3{
  $myAnimationsList : "ease-in", "linear", "";
  $myTransitionsList : "font-size .5s", "color .5s", "width .5s";
  @include transitionMap($myAnimationsList,$myTransitionsList);
}

使用mixin

1 个答案: