自定义组件动画在拖放时在 Angular 9 + CDK 中不起作用答案

【问题标题】：Custom component animation does not work in Angular 9 + CDK`on drag n drop自定义组件动画在拖放时在 Angular 9 + CDK 中不起作用
【发布时间】：2020-09-30 05:50:25
【问题描述】：

我正在尝试创建一个用户可以重新排序项目的列表，使用 @angular/cdk/drag-drop 并按照官方文档 (https://material.angular.io/cdk/drag-drop/overview) 中的示例进行操作非常简单。

我的示例确实有效，它可以在拖放时重新排序列表，但动画不适用于自定义组件，我的意思是，列表容器和列表项是自定义组件，正如您在 Stackblitz 中看到的那样：

https://stackblitz.com/edit/angular-ivy-kl3vgd

如何让动画像 Angular“拖放排序”示例中一样工作？

提前致谢，

【问题讨论】：

您需要为其编写自定义样式。见material.angular.io/cdk/drag-drop/overview#animations

标签： angular angular-material angular-animations angular-cdk

【解决方案1】：

我认为如果您将组件放在可拖动对象 div 中，内置动画应该可以工作

<div *ngFor="let file of files" cdkDrag>
    <app-upload-item>
        {{file}}
    </app-upload-item>
</div>

【讨论】：