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

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 中需要什么才能使其与多个过渡语句一起使用，用逗号分隔？或者换句话说：在这个mixin中，如何在,和transition内部;之前注入动画功能？

Answer 1

这应该可以解决你的问题.
你想使用Sass的@each指令，结合变量参数和Sass的追加函数。

循序渐进：

@mixin transition($transitions...){这告诉萨斯你正在接受不同数量的论点。问题是用逗号分隔不同的过渡，这与你现在正在做的事情有点不同。

$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：添加了另一种将不同动画功能映射到不同过渡的方法

这个版本利用了萨斯的列表。您可以创建一个动画函数列表和另一个应用这些功能的过渡列表.
在这里，限制是您需要在每个列表中提供完全相同数量的元素.
但是，您可以按照所需的方式组合过渡和动画函数.
空字符串默认为默认动画函数(在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);
}