Question

我试图使用LESS变量来操作循环关键帧动画的时序。我想基于一些变量使我的动画不能用于计算，但LESS正在解析关键帧值而不进行数学计算。

有人知道这是否可行？

@sL: 15px;                      /* slide length */
@aL: 4%;                        /* animation length */
@pL: (100% - (@aL * 10)) / 2;   /* pause length (100% - length of all animations / 2) */

@-webkit-keyframes slideA {
    0%                      { left: 0; }
    @{aL}                   { left: @sL; }
    (100%-@{pL})-@{aL} * 2  { left: @sL; }
    (100%-@{pL})            { left: 0; }
    100%                    { left: 0; }
}

LESS输出如下：

/* slide length */
/* animation length */
/* pause length (100% - length of all animations / 2) */
@-webkit-keyframes slideB {
  0% {
    left: 0;
  }
  4% {
    left: 0;
  }
  (4% * 2) {
    left: 30px;
  }
}

Answer 1

较少有一些模糊语法的问题，例如在媒体查询中，您可能希望在CSS中打印16/9而不是计算除法。在某些属性中可能会发生相同的情况（例如font）。对于这些情况，Less（1.7）不执行操作，除非您明确地将其放在括号内。另一个问题是破折号，因为它可以在变量中使用，作为一元运算符，如果有空格可能意味着不同的东西..我不确定Less如何在关键帧中处理这些问题，但你总是可以如果您将计算放在变量（顶级或作用于mixins）中，则是安全的。

这是使用变量的代码版本。它应该没有问题（在http://lesstester.com/中尝试）：

@sL: 15px;                      /* slide length */
@aL: 4%;                        /* animation length */
@pL: (100% - (@aL * 10)) / 2;   /* pause length (100% - length of all animations / 2) */
@v1: (100% - @pL) - @aL * 2;
@v2: (100% - @pL);


@-webkit-keyframes slideA {
    0%     { left: 0; }
    @{aL}  { left: @sL; }
    @{v1}  { left: @sL; }
    @{v2}  { left: 0; }
    100%   { left: 0; }
}

使用LESS变量为动画关键帧做数学运算

1 个答案: