Question

我为我的作品编写了 less 包。

有些代码如下：

.goTop(@time:1s,@position:-100%){
	@random_suffix:`Math.round(Math.random() * 1.0e8)`;
	@keyframes @random_suffix{
		from{transform:translateY(0);}
		to{transform:translateY(@position);}
	}
	animation-name:@random_suffix;
	animation-duration:@time;
	animation-timing-function:ease-out;
	animation-fill-mode:forwards;
}

然后我可以在我需要的地方使用它。

像这样：

.testbox{
  .goTop(1s);
 }

为什么我应该使用随机数？

因为，如果所有关键帧都是相同的名称，并且最后一部分将覆盖旧部分。（参数不相同）

现在，关键帧名称是一个随机数。

但是当关键帧名称是数字时，动画将不会运行。

所以我希望这个名字像 goTop_12345678 。

我尝试联系字符串以获取变量名称。

@temp1:goTop_;
@temp2:`Math.round(Math.random() * 1.0e8)`;
@test:@temp1 + @temp2;
// Error
//{"type":"Syntax","message":"Cannot read property 'numerator' of undefined","filename":"input","index":94,"line":4,"callLine":null,"column":0,"extract":["@temp2:goTop_;","@test:@temp1 + @temp2;",""]}

@temp1:'goTop_';
@temp2:`Math.round(Math.random() * 1.0e8)`;
@test:`@{temp1} + @{temp2}`;
//"goTop_12345678"
//It contains the symbol quote "",and the animation will not run.

@temp1:goTop_;
@temp2:@temp1+`Math.round(Math.random() * 1.0e8)`;
@test:@temp2;
//"goTop_ 12345678"
//It contains the space ,and the animation will not run too.

//For the second and third way
//I have try to use replace way to solve it,but I failed.

所以，...

如何解决这个问题...

非常感谢。

@cloudhead

Answer 1

感谢@ seven-phases-max。

编写var的正确方法是这样的：

＆＃13;

@random: `Math.round(Math.random() * 1.0e8)`;
@name: ~"go-top-@{random}"; // <- here we go

//or

@name:~"go-top-`Math.round(Math.random() * 1.0e8)`";

＆＃13;

但新问题是随机数不一样......

＆＃13;

.test {
  background-color: #f39;
  width: 200px;
  height: 200px;
  margin-top: 400px;
  -webkit-animation-name: goTop_70024767;
          animation-name: goTop_70024767;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes goTop_50030730 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes goTop_50030730 {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

＆＃13;

Answer 2

最后一个解决方案，有些代码如下：

＆＃13;

.goTop(@time:1s,@position:-100%,@ease:ease-out,@fillmode:forwards){
	.goTopKeyframe(~`'goTop_'+Math.round(Math.random() * 1.0e8)`);
}
.goTopKeyframe(@name){
	@keyframes @name{
		from{transform:translateY(0);}
		to{transform:translateY(@position);}
	}
	animation-name:@name;
	animation-duration:@time;
	animation-timing-function:@ease;
	animation-fill-mode:@fillmode;
}

＆＃13;

如何通过较少修复空格或引号符号来创建随机关键帧名称

2 个答案: