"transition: margin-top <time>" doesn't work at all

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?

Continue reading...