要停止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