Question

我正在做复杂的关键帧动画，我当前的过程是将动画的持续时间输入到电子表格中，该电子表格会告诉我时间点所占的所有百分比，然后将这些百分比复制回我的css 。这变得相当费力，特别是如果我因任何原因改变持续时间，那么所有百分比都会改变。我想使用一个函数来简化它，如下所示：

@function secPerc($currentTime,$totalTime){
  @return ($currentTime*100)/$totalTime * 100%;
}

尝试使用输出：

secPerc(0.8/2) {transform: rotate(70deg);}

不断收到编译错误。也尝试使用mixin无济于事。请参阅this simplified Codepen作为示例。

Answer 1

首先，如果你想在选择器或属性名称部分中使用函数，mixin或变量，你需要通过将它放在#{expression}语法内来告诉SASS解析它。

其次，即使您尝试编译该函数，您也会发现它需要两个参数（因为这是您定义它的方式）并且您只传递一个（0.8/2只等于0.4 =＆gt;一个参数）。
如果您希望输出任何内容，请确保传递自定义函数所需的所有必需参数：

@keyframes spin {
  ...
  #{secPerc(0.8, 2)} {
    transform: rotate(70deg);
  }
  ...
}

https://codepen.io/andrei-gheorghiu/pen/wmxpqB

顺便说一下，您是否知道现在可以使用Chrome开发控制台中的工具（可视化计时功能编辑器）创建复杂的关键帧动画，该工具允许您修改任何animation-timing-function以创建cubic-bezier()函数，无需记住（或者说很有意义）他们的价值观？只需为您的元素提供任何有效的cubic-bezier()值并进行检查即可。单击其值旁边的小图标，您将获得计时功能的可视编辑器。它太酷了！你有可能得到你想要的动画，而不需要自己做所有的数学运算。你会得到更快的结果，最终的结果会更快，你想要的“自然”，更容易控制和调整。

scss函数输出为关键帧步长百分比

1 个答案: