So erstellen Sie einen zufälligen Keyframes-Namen um weniger das Leerzeichen oder das Anführungszeichen

Question

Ich habe ein weniger Paket für meine Arbeit schreiben.

Einige Code wie folgt:

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

Dann kann ich es irgendwo verwenden, um auf die ich brauche.

So:

.testbox{ 
 
    .goTop(1s); 
 
}

Warum sollte ich eine Zufallszahl verwenden?

Denn wenn alle Keyframes sind die gleichen Namen, und der letzte Teil wird den alten Teil überschrieben werden. (Die Argumente sind nicht die gleichen)

Nun wird der Keyframe-Name eine Zufallszahl ist.

Wenn der Keyframe-Name jedoch eine Zahl ist, wird die Animation nicht ausgeführt.

Also ich hoffe, der Name wie goTop_12345678.

Ich versuche, die Zeichenfolge für den Variablennamen zu kontaktieren.

@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.

so, ...

Wie dieses Problem ...

Vielen Dank zu lösen.

@cloudhead

Answer 1

Die letzte Lösung, einige Code wie folgt:

.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

Dank für die @ Sieben-Phasen-max.

der richtige Weg, um die var ist wie folgt zu schreiben:

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

 
//or 
 

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

Aber das neue Problem ist, dass die Zufallszahl nicht gleich sind ...

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