使用ngForOf对项目数组进行重新排序/排序时，动画无法正确触发。

Question

Number_1

触发：

<div>
    <div>
        <ng-template ngFor let-item="$implicit" [ngForOf]="pictures">
            <div
                [@slideToggle]="item.state"
                (click)="activate(item, $event)"
                [ngClass]="{'active' : item.active}">
                <img [src]="item.src" [alt]="item.alt" [title]="item.title"/>
                <div>
                    <span>{{item.title}}</span>
                </div>
            </div>
            <div [class.active]="item.active" [@viewportToggle]="item.state"
                 [attr.state]="item.state"
                 [ngClass]="{'out' : item.state === 'out', 'stay' : item.state === 'stay', 'in': item.state === 'in'}">
            </div>
        </ng-template>
    </div>
</div>

我通过类列表（用于验证）呈现了项目的当前状态，并始终设置了正确的状态，但是当trigger('viewportToggle', [ state('out', style({ height: 0, })), state('in', style({ height: '*', })), state('stay', style({ height: '*', })), transition('out => in', [ style({ display: 'block' }), animate('250ms ease-out') ]), transition('in => stay', [ animate('0ms ease-out') ]), transition('* => out', animate('250ms ease-in') ) ]) 重新排序时，pictures无法正确触发

例如，排序后，当您单击某项时，即使viewportToggle为state时，触发的'in'也为state，这是该项的状态不活动/未选择时，即使'out'为0px，高度也等于state。

这似乎也是in的间歇性问题。重新排列列表后，有时动画将不会立即启动，或者在动画开始工作之前还需要等待一段时间。

注意：这实际上是SmartAdmin的Gallery组件，但是我不得不重新创建它以添加一些内容。即使使用原始组件，无论如何我仍然会遇到相同的问题。