Angular 9拖放 - 如何停止DropList的“元素重排”动画_编程开发

创始人

2024-10-18 12:01:45

0次

要停止Angular 9拖放中的“元素重排”动画，您可以使用CDK拖放库提供的CdkDrag指令的cdkDragRootElement属性。

首先，确保您已经安装了CDK拖放库。如果尚未安装，请运行以下命令：

npm install @angular/cdk @angular/cdk-experimental

接下来，您可以在拖动元素的HTML模板中使用cdkDragRootElement属性。该属性允许您指定在拖动期间应用动画的顶级元素。

下面是一个示例，展示了如何停止DropList的“元素重排”动画：

在上面的示例中，我们将cdkDragRootElement属性设置为".no-animation"，这是一个具有.no-animation类的顶级元素的选择器。您可以根据自己的需要更改类名。

接下来，您需要在全局CSS文件中定义.no-animation类，以将动画效果设置为“none”：

.no-animation {
  transition: none !important;
}

使用上述代码，当您在拖动元素时，将不再应用“元素重排”动画。

请注意，这种方法将停止整个DropList的动画效果。如果您只想停止特定元素的动画，可以在该元素的父元素上应用cdkDrag指令，并设置cdkDragRootElement属性，如上所示。