css - 将仅接受 from & 的 mixin 转换为关键帧选择器以接受多个关键帧选择器

Question

我有这个 Less 混音:

.keyframes (@name, @fromRules, @toRules) {
    @-webkit-keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
            @keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
}

我调用例如:

.keyframes(fade-in,
    {
        opacity: 0;
    },
    {
        opacity: 1;
    }
);

结果是:

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

但是我如何使用 Less mixins 以便我可以使用不同于 0%、100% 以及超过 2 个关键帧选择器的关键帧选择器，因此结果将如下所示:

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

感谢您的帮助。

Answer 1

您可以通过传递整个关键帧选择器列表的规则(例如 0%、50%、100% 等)来实现这一点) 作为 mixin 的单个规则集以及动画的名称。

另外正如 seven-phases-max 在评论中提到的，@-webkit-keyframes ~'@{name}' 不是必需的，它可以简单地写成 @- webkit-keyframes @name.

.keyframes (@name, @rules) {
    @-webkit-keyframes @name { @rules(); }
            @keyframes @name { @rules(); }
}

div{
    .keyframes(fade-in,
    {
        0% { opacity: 0;}
        50% { opacity: 1;}
        100% { opacity: 0;}
    });
}

CodePen Demo - 单击 CSS 框中的眼睛图标以查看编译后的输出。

注意:

• > Passing rulesets to a mixin在 Less v1.7.0 中引入，因此上述代码不适用于较低版本。