공백이나 따옴표를 덜 수정하여 임의의 키 프레임 이름을 만드는 방법

Question

을 내 작품에 대해 패키지로 적습니다. 이 같은

일부 코드 :

.goTop(@time:1s,@position:-100%){ 
 
\t @random_suffix:`Math.round(Math.random() * 1.0e8)`; 
 
\t @keyframes @random_suffix{ 
 
\t \t from{transform:translateY(0);} 
 
\t \t to{transform:translateY(@position);} 
 
\t } 
 
\t animation-name:@random_suffix; 
 
\t animation-duration:@time; 
 
\t animation-timing-function:ease-out; 
 
\t 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

마지막 솔루션이 같은 일부 코드 :

는

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

Answer 2

감사합니다.

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

 
//or 
 

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

그러나 새로운 문제는 임의의 숫자가 동일하지 않은 것입니다 ... :

var에를 작성하는 올바른 방법은 다음과 같이이다

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