Question

我有这个Less mixin：

.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以及动画的名称。

同样如评论中的七阶段最大值所述，@-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中引入，因此上述代码不适用于较低版本。

转换仅接受＆amp; amp;的mixin关键帧选择器接受多个关键帧选择器

1 个答案: