如何禁用动画角质材料2中的角度对话框4
您可以通过导入禁止
NoopAnimationsModule
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [NoopAnimationsModule],
...
})
如果我想在特定条件下禁用动画,那我该怎么做。 –
尝试在组件字段示例中添加转换.mat-dialog-container { transition:none; } – CharanRoot
你摇滚。它工作。 –
在你要保持你的动画在您的应用程序的情况下,但能够禁用一个附加到一个对话框,你可以通过一个对话框来覆盖对话框,你可以控制和禁用所有的动画该容器内的mations。
覆盖OverlayContainer部件
-
创建延伸从CDK
import { OverlayContainer } from '@angular/cdk/overlay'; export class CustomOverlayContainer extends OverlayContainer { _defaultContainerElement: HTMLElement; constructor() { super(); } public setContainer(container: HTMLElement) { this._defaultContainerElement = this._containerElement; this._containerElement = container; } public restoreContainer() { this._containerElement = this._defaultContainerElement; } }
-
覆盖上的应用程序模块提供者的CDK OverlayContainer由自定义一个所述一个自定义OverlayContainer
export function initOverlay() { return new CustomOverlayContainer(); } @NgModule({ ... providers: [ ... { provide: OverlayContainer, useFactory: initOverlay } ... ] ... })
替换对话框包装
获取访问的新对话框容器和替换默认的一个
export class AppComponent implements AfterViewInit {
@ViewChild('dialogContainer') dialogContainer: ElementRef;
constructor(private dialog: MatDialog, private overlayContainer: OverlayContainer) {
}
ngAfterViewInit() {
(this.overlayContainer as CustomOverlayContainer).setContainer(this.dialogContainer.nativeElement);
this.dialog.open(...);
}
}
禁用动画
添加[@.disabled]
绑定到你的容器,以便禁用其内部发生的所有动画。 https://angular.io/api/animations/trigger#disable-animations
<div #dialogContainer [@.disabled]="true"></div>
'进口{} NoopAnimationsModule从 '@角/平台的浏览器/动画';'而不是'进口{} BrowserAnimationsModule '@角/平台的浏览器/动画';'在主'AppModule'并放入'imports'数组中。这完全关闭了动画。除此之外,你不清楚你在问什么。 –