6

I have some code.

Pug:

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

The problem is that the counter counts from 100 and when it reaches 50, the counter would stop - 100% {content: 'Stop'; } And the animation would end (now it continues 49% {content: '51';} 100% {content: 'Stop';} 51% {content: '49';}).

Question: Is there something like break; for scss like in js?

codepen

P.S: @break; does not work as desired.

PPS: Same question in Russian.

3
  • 1
    Don't know why but got your code working with @if $i > 49 instead of equal sign. Maybe someone can shed some light on this.
    – VilleKoo
    Jul 18, 2017 at 6:37
  • hm, really work ... but the compilation is not very beautiful
    – SVE
    Jul 18, 2017 at 6:41
  • I can assume that he does not fall into position 50 and immediately jumps to the next number
    – Yuri
    Jul 18, 2017 at 9:32

1 Answer 1

2

Based on the answer posted on the Russian question you can use SCSS to create the numbers

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 Output (using 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%));
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.