css - 将参数传递给关键帧动画

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

Please don't use Less mixins for vendor prefixing. It is better to leave that part to the libraries like auto-prefixer, prefix-free etc.

回答您的问题，

What do I put in place for the ?? I don't understand this.

您应该用动画的名称代替 ?。动画的名称是在 @keyframe 指令之后提供的名称。此处只是进度，因此 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 */
}

下面是使用此代码的示例演示(为完整性添加了一些属性和设置):

.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%;
  }
}

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

Do I put the animation calls within .progress-anim?

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