"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?

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

Stackblitz Example