String 使用mixin将动画功能注入到过渡中

我所拥有的：

.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中，有什么必要使它能够处理多个转换语句，并用逗号分隔？或者换句话说：如何在

、

和

之前注入动画功能内部
转换
在此混音中？
这应该可以解决您的问题。

您要使用，结合和

一步一步：

@mixin transition（$transitions…{
这告诉Sass您正在接受数量不等的参数。关键是用逗号分隔不同的转换，这与您现在所做的有点不同

$result:（）；
创建一个空列表

@each…
：我们正在迭代您的转换列表

$result:append（$result，…，逗号）；
我们将插入的字符串（
unquote（…）unquote（…）
）追加到
$result
，逗号分隔，并将其分配给
$result

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

代码片段：


$animationFn：“轻松进出”；
@混合转换（$transitions…）{
$结果：（）；
@在$transitions中的每个$transition{
$result:append（$result，unquote（$transition）unquote（$animationFn），逗号）；
}
背面可见性：隐藏；
过渡：结果；
}
.测试{
@包括过渡（“所有5s”）；
}
.test2{
@包括转换（“字体大小.5s”，“颜色.5s”）；
}
谢谢，这就是我要找的。我会尽快（10小时后）奖励奖金。但是，我有一个关于这种混合的问题，您可能可以回答：是否有机会使动画函数也可以选择使用参数？因此，默认值将是
$animationFn
，但可以指定自定义函数作为最后一个函数参数，例如
@include transition(“font size.5s”、“color.5s”、“ease”）；
？我刚刚添加了另一个片段。您需要提供
动画函数作为第一个参数，即使它是空的。我刚刚添加了第三种方法。