要停止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属性,如上所示。
上一篇:Angular 9通用和SEO