我正在尝试创建对话框,但问题是我想禁用对话框中的动画,那么如何禁用它。
我正在尝试创建对话框,但问题是我想禁用对话框中的动画,那么如何禁用它。
你可以通过导入
NoopAnimationsModule
来禁用它。
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [NoopAnimationsModule],
...
})
Create a custom OverlayContainer which extends the one from the 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;
}
}
Override the cdk OverlayContainer by the custom one on the app module providers
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>
[@.disabled]
,但我的触发器被忽略了。@Yuri有没有办法使用我自己的动画触发器(从右侧滑入)代替禁用内置的触发器? - FirstVertexdefaultContainerElement
的组件,例如 matMenu
(垂直三个点),我可以看到 restore
函数,但如何使用它以使应用程序初始化时使用 defaultContainerElement
的所有其他组件都正常工作? - user12163165这应该可以缓解大多数想要禁用它的开发者的问题。
它从中心打开,稍微放大而不是滑动。关闭时会立即消失。在手机上,底部工具栏最初是隐藏的,也表现得很好。
在图形卡性能较差、旧手机或包含复杂内容的对话框上,它的表现应该更加出色。
mat-select
,mat-menu
等)的动画。在Angular Material git中,您可以找到与组件相邻的<component>-animations.ts
文件,其中声明了所有默认动画(例如https://github.com/angular/components/blob/master/src/material/select/select-animations.ts - 用于mat-select
)。mat-select
下拉列表的动画:MatSelect['decorators'][0].args[0].animations[0] = trigger('transformPanelWrap', []);
MatSelect['decorators'][0].args[0].animations[1] = trigger('transformPanel', []);
mat-select
下拉列表的动画。触发器名称来自上述描述的文件(请检查 Material 资源)。您也可以轻松地使用相同的方式替换现有动画为自定义动画。MatSelect['decorators'][0].args[0].animations[1] = trigger('transformPanel', [
state('void', style({
transform: 'scale(0.1)',
opacity: 0
})),
]);
animations
内的元素顺序对应于原始动画声明顺序。['decorators'][0].args[0]
始终保持不变。
AppModule
中,将import { BrowserAnimationsModule } '@angular/platform-browser/animations';
替换为import { NoopAnimationsModule } from '@angular/platform-browser/animations';
并将其放置在imports
数组中。这将完全关闭动画效果。除此之外,不清楚您要问什么。 - Neil Lunn