Angular CDK перетаскивание CDK: элементы меняются с анимацией ⇐ Javascript

[Anonymous]

В Angular 18 Я реализовал простой компонент, используя угловой перетаскивание CDK (вы можете увидеть лучшие примеры здесь): < /p>
import {Component} from '@angular/core';
import {
CdkDrag,
CdkDragDrop,
CdkDragPlaceholder,
CdkDropList,
moveItemInArray,
} from '@angular/cdk/drag-drop';

@Component({
standalone: true,
selector: 'cdk-drag-drop-custom-placeholder-example',
template: `
@for (movie of movies; track movie) {
Up
Down


{{movie}}

}
`,
styleUrl: 'cdk-drag-drop-custom-placeholder-example.css',
imports: [CdkDropList, CdkDrag, CdkDragPlaceholder],
})
export class CdkDragDropCustomPlaceholderExampleComponent {
movies = [
'Episode I - The Phantom Menace',
'Episode II - Attack of the Clones',
'Episode III - Revenge of the Sith',
'Episode IV - A New Hope',
'Episode V - The Empire Strikes Back',
];

moveUp(item: string) {
const index = this.movies.indexOf(item);
moveItemInArray(this.movies, index, index - 1);
}

moveDown(item: string) {
const index = this.movies.indexOf(item);
moveItemInArray(this.movies, index, index + 1);
}

drop(event: CdkDragDrop) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
}
< /code>
Этот простой код работает, и при перетаскивании фильмов вокруг есть анимация, которая перемещает их в массиве, < /p>
Проблема начинается при использовании кнопки вверх /вниз, чтобы перемещать элементы,
они переключают места, но мгновенно и без анимации вообще. < /p>
Я хотел бы знать, как включить анимацию при изменении массив вручную.
Спасибо! < /p>

Подробнее здесь: https://stackoverflow.com/questions/794 ... -animation