Ich habe einen Code.Führen Sie die Pause aus; in SCSS
Mops:
div(data-counter="100")
SCSS:
$start: 100;
$end: 20;
div:before {
content: attr(data-counter);
animation: countdown 10s steps(1, start) forwards;
}
@keyframes countdown {
@for $i from 1 through $start {
@if $i == 50 {
100% {
content: 'Stop';
}
} @else {
#{$i}% {
content: '#{($start - $i)}';
}
}
}
}
Das Problem ist, dass der Zähler von 100
und wenn es 50
erreicht, würde der Zähler stoppen - 100% {content: 'Stop'; }
Und die Animation würde (jetzt beenden es geht weiter 49% {content: '51';} 100% {content: 'Stop';} 51% {content: '49';}
).
Frage: Gibt es etwas wie break;
für scss wie in js?
P. S:@break;
funktioniert nicht wie gewünscht.
PPS: Same question in Russian.
Ich weiß nicht warum, aber Ihr Code funktioniert mit @if $ i> 49 anstelle von Gleichheitszeichen. Vielleicht kann jemand etwas Licht darauf werfen. – VilleKoo
hm, wirklich arbeiten ... aber die Zusammenstellung ist nicht sehr schön – Elena
Ich kann davon ausgehen, dass er nicht in Position 50 fällt und springt sofort zur nächsten Nummer – Yuri