Question

所以我看到了这个问题（Add argument into @keyframes property Less），但它并没有完全解决我的问题。

.progress-anim(@percentage: 0%) {
    @-webkit-keyframes progress { 
        to { width: @percentage }
    }

    @-moz-keyframes progress { 
        to { width: @percentage }
    }

    @-ms-keyframes progress { 
        to { width: @percentage }
    }

    @keyframes progress { 
        to { width: @percentage }
    }
}

以上就是我想要做的事情。这个，我明白了。我不明白的是，如何从animation属性运行它。

.progress {
    -webkit-animation: ? 2s 1 forwards;
    -moz-animation: ? 2s 1 forwards;
    -ms-animation: ? 2s 1 forwards;
    animation: ? 2s 1 forwards;
}

我为?做了什么？我不明白这一点。

我是否将animation来电置于.progress-anim？

Answer 1

请不要使用Less mixins作为供应商添加前缀。最好将该部分留给库，如auto-prefixer，prefix-free等。

回答你的问题，

我为?做了什么？我不明白这一点。

您应该在?的位置替换动画的名称。动画的名称是在@keyframe指令之后提供的名称。这里只是 progress ，所以CSS应该是这样的：

.progress {
  animation: progress 2s 1 forwards;
}

如果您已经知道这一点，并且正在尝试了解如何使用Less来避免多次写入动画的名称，那么您可以使用变量和参数混合，如下所示：

.progress-anim(@name; @percentage: 0%) { /* name also as an extra param */
  @keyframes @name { /* set the name dynamically */
    to { width: @percentage }
  }
}

.progress {
  @name: progress; /* animation name */
  .progress-anim(@name, 50%); /* pass it to mixin */
  animation: @name 2s 1 forwards; /* use variable in animation prop */
}

以下是使用此代码的示例演示（为了完整性，添加了一些属性和设置）：

＆＃13;

.container {
  position: relative;
  height: 100px;
  width: 500px;
  border: 1px solid;
}
.progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0%;
  background-color: tomato;
  animation: progress 2s 1 forwards;
}
@keyframes progress {
  to {
    width: 50%;
  }
}

＆＃13;

<div class='container'>
  <div class='progress'></div>
</div>

＆＃13;

我是否将动画调用放在.progress-anim？
中

不，在选择器中指定将引用progress元素的动画属性。

将参数传递给关键帧动画

1 个答案: