«переход: маржа-топ <время>» вообще не работает ⇐ CSS

[Anonymous]

Потоки YouTube имеют особую особенность: количество просмотров время от времени меняется, и при этом цифры прокручиваются вверх или вниз. Из простого элемента проверки я вижу, что каждая цифра представляет собой полосу чисел, которая динамически меняет поля-верх: ??px.
Затем я решил повторно реализовать это в моем текущем проекте Angular:

Код: Выделить всё

rolling.component.html

:

Код: Выделить всё

{{ digit }}

Код: Выделить всё

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

Весь проект также доступен по адресу https://github.com/minhperry/skyblock-s ... ing-number для просмотра и клонирования. для тестирования. Затем тестирование доступно по адресу http://localhost:6969/test.
Однако проблема в том, что когда я пытаюсь каким-либо образом изменить число, добавив setTimeOut или, увеличивая/уменьшая его, смещение поля-верха происходит немедленно, несмотря на то, что я уже определил переход там? Правильно ли я здесь использовал переход или мне нужно использовать его каким-то другим способом?

Подробнее здесь: https://stackoverflow.com/questions/790 ... ork-at-all