Wykonaj przerwę; w SCSS

Question

Mam trochę kodu.

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

Problemem jest to, że licznik zlicza od 100 i gdy osiągnie 50, licznik zatrzyma - 100% {content: 'Stop'; } a animacja się skończy (obecnie kontynuuje 49% {content: '51';} 100% {content: 'Stop';} 51% {content: '49';}).

Pytanie: Czy jest coś takiego jak break; dla scss jak w js?

codepen

P.S:@break; nie działa zgodnie z oczekiwaniami.

PPS: Same question in Russian.

Answer 1

Na podstawie odpowiedzi zamieszczonych w kwestii rosyjskiej można wykorzystać SCSS tworzyć numery

Demo: 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%)) } 
} 

CSS wyjścia (przy użyciu programu 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%)); 
    } 
}