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

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.

所以，...

如何解决这个问题...

非常感谢。

@云头

Answer 1

感谢@seven-phases-max。

var 的正确写法是这样的:

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

//or

@name:~"go-top-`Math.round(Math.random() * 1.0e8)`";

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

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