selectors - Ejecutar el descanso; en SCSS

selectors sass

Question

Tengo un código.

Doguillo:

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)}'';
}
}
}
}

El problema es que el contador cuenta desde 100 y cuando llega a 50 , el contador se detendrá: 100% {content: ''Stop''; } 100% {content: ''Stop''; } Y la animación finalizaría (ahora continúa 49% {content: ''51'';} 100% {content: ''Stop'';} 51% {content: ''49'';} ).

Pregunta: ¿Hay algo así como un break; para scss como en js?

codepen

PD: @break; no funciona como se desea

PPS: la misma pregunta en ruso.

Answer 1

Según la respuesta publicada en la pregunta de Rusia, puede usar SCSS para crear los números

Demostración: https://codepen.io/jakob-e/pen/mwYKpV

SCSS:

@function countdown-numbers($from: 100, $through: 0){
$str: '''';
@for $i from $from through $through { $str: $str + ''#{$i}/A''; }
@return $str;
}
div {
line-height: 1.2;
height: 1.2em;
overflow: hidden;
&::after {
display: inline-block;
white-space: pre-wrap;
// creates 50 numbers 100/A 99/A ... 51/A
// and add STOP to the string
content: countdown-numbers(100, 51) + STOP;
// run animation in 50 steps (don''t count start)
animation: countdown 10s steps(50) forwards;
}
}
@keyframes countdown {
to { transform: translateY(calc(1.2em - 100%)) }
}

Salida CSS (usando Autoprefixer):

div {
line-height: 1.2;
height: 1.2em;
overflow: hidden;
}
div::after {
display: inline-block;
white-space: pre-wrap;
content: "100/a 99/a 98/a 97/a 96/a 95/a 94/a 93/a 92/a 91/a 90/a 89/a 88/a 87/a 86/a 85/a 84/a 83/a 82/a 81/a 80/a 79/a 78/a 77/a 76/a 75/a 74/a 73/a 72/a 71/a 70/a 69/a 68/a 67/a 66/a 65/a 64/a 63/a 62/a 61/a 60/a 59/a 58/a 57/a 56/a 55/a 54/a 53/a 52/a 51/aSTOP";
-webkit-animation: countdown 5s steps(50) forwards;
animation: countdown 5s steps(50) forwards;
}
@-webkit-keyframes countdown {
to {
-webkit-transform: translateY(calc(1.2em - 100%));
transform: translateY(calc(1.2em - 100%));
}
}
@keyframes countdown {
to {
-webkit-transform: translateY(calc(1.2em - 100%));
transform: translateY(calc(1.2em - 100%));
}
}