“过渡：边距顶部<time>”根本不起作用

Question

YouTube 流有一个特定的功能，即观看次数会偶尔发生变化，并且数字会向上或向下滚动。从简单的检查元素中，我可以看到每个数字都是一条会动态变化的数字。

然后我决定在我当前的 Angular 项目中重新实现它：

margin-top: ??px
：

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

整个项目也可以在 

https://github.com/minhperry/skyblock-simulator/tree/master/src/app/animation/rolling-number

下查看和克隆以进行测试。然后可以在 http://localhost:6969/test 下进行测试。 但是，问题是，当我尝试以任何方式修改数字时，通过添加

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

或递增/递减它，

setTimeOut

的移动会立即发生，尽管我已经在那里定义了转换？我在这里正确使用了过渡还是应该以其他方式使用？

Answer 1

margin-top

时，Angular 都会破坏由

*ngFor

部分 DOM 渲染的内容。但 css 动画要求 DOM 保持不变。这是

rollingCharacters

的常见问题，因此请尝试使用

*ngFor

html

trackBy

ts

*ngFor="let char of rollingCharacters; trackBy: trackByIndex; let i = index">

Stackblitz 示例