YouTube streams have a specific feature in the view count will change once in a while and with that, the numbers will scroll up or down. From simple inspecting element, I can see that each digit is a strip of numbers that would change margin-top: ??px
dynamically.
I then decided to re-implement it in my current Angular project:
rolling.component.html
:
<div class="animated-rolling-number">
<ng-container *ngFor="let char of rollingCharacters; let i = index">
<div class="animated-rolling-character" [style.margin-top]="getMargin(i)">
<div *ngFor="let digit of [9,8,7,6,5,4,3,2,1,0]">
{{ digit }}
</div>
</div>
</ng-container>
</div>
rolling.component.scss
:
$size: 30px;
.animated-rolling-number {
position: relative;
height: 10 * $size;
overflow: hidden;
display: flex;
}
.animated-rolling-character {
height: 10 * $size;
display: flex;
flex-direction: column;
transition: margin-top 2s;
font-size: $size;
margin-top: 0; // even removing this doesnt work either
div {
height: $size;
display: flex;
align-items: center;
justify-content: center;
}
}
rolling.component.ts
:
import {Component, Input} from '@angular/core';
@Component({
selector: 'rolling-number',
templateUrl: './rolling-number.component.html',
styleUrls: ['./rolling-number.component.scss']
})
export class RollingNumberComponent {
public rollingCharacters: number[] = [];
private _value: number = 0;
private size: number = 30;
@Input()
set value(newValue: number) {
if (newValue !== this._value) {
this._value = newValue;
this.updateRollingCharacters(newValue);
}
}
private updateRollingCharacters(newValue: number) {
this.rollingCharacters = newValue.toString().split('').map(Number);
}
public getMargin(index: number): string {
const currentDigit = this.rollingCharacters[index] || 0;
const marginTop = -(9 - currentDigit) * this.size;
return `${marginTop}px`;
}
}
The whole project is also available under https://github.com/minhperry/skyblock-simulator/tree/master/src/app/animation/rolling-number to be viewed and clone for testing. The testing is then available under http://localhost:6969/test.
However, the problem is, when I try to modify the number in anyway, by adding a setTimeOut
or by incrementing/decrementing it, the shifting of margin-top
just happen immediately, despite me having defined the transition already there? Did I use the transition correctly here or am I supposed to use in some other way?
The issue here is that Angular destroyes your rendered by *ngFor
pieces of DOM each time you're updating rollingCharacters
. But css animation requires the DOM to stay the same.
That's common issue with *ngFor
, so try to use trackBy
html
*ngFor="let char of rollingCharacters; trackBy: trackByIndex; let i = index">
ts
trackByIndex(i: number) {
return i;
}