禁用 Angular 2 Material 中的动画

Question

我的问题是如何在Angular Material小部件中禁用按钮或复选框动画？

有一些CSS解决方案可以使用"none"来覆盖过渡效果，但这并不起作用。

谢谢！

- Nav

---

import {NoopAnimationsModule} from '@angular/platform-browser/animations'; //导入整个模块 - Julia Passynkova

我只想禁用复选框而不是其他组件，怎么办？ - Nav

实际上，我刚刚转换到NoopAnima.. 但是什么也没有改变！ - Nav

NoopAnimationsModule移除了一些动画，但保留了其他动画。例如，对话框开始出现在它们期望的位置，没有滑动/淡入淡出效果，但背景仍然有淡入淡出效果，标签在输入框中移动时也是如此。总之，在IE11中使用NoopAnimationsModule仍然很慢。 - Victor Zakharov

Answer 1

您可以使用在Angular 4.3.1中引入的 @.disabled 属性来禁用动画。

要在组件中添加以下代码：

@HostBinding('@.disabled') disabled = true

或者在你的 HTML 中。

<div [@.disabled]="expression"></div>

这里是可用的 plnkr https://plnkr.co/edit/sVJM8H?p=preview

- Lokesh Daiya

---

你想在mat-select中禁用哪个动画？ - Lokesh Daiya

如果你在谈论弹出窗口，那是不可能的。我之前也尝试过。 - Lokesh Daiya

对我有用！<mat-tab-group [@.disabled]="true"> <mat-tab label="选项卡1">内容1</mat-tab> <mat-tab label="选项卡2">内容2</mat-tab> </mat-tab-group> - BorisD

谢谢！我在angular2中找不到它。只有从angular 4.3.1开始才有。 谢了，伙计！ - Dudi

Answer 2

尝试这个：

<mat-group [@.disabled]="true">
    <mat-tab label="one">one</mat-tab>
    <mat-tab label="two">two</mat-tab>
    <mat-tab label="three">three</mat-tab>
</mat-group> 

- user10780188

Answer 3

另一种方法是使用路由导航的hackie（稍后找到更改返回值的地方）。

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
};
this.router.navigate(['your-page', nextTabIndex]);

这将与*ngIf条件相同，但也很重要定义一个路由参数，例如:tab

{
   path: 'your-path/:tab',
   component: YourComponent
}

当然，你应该使用<route-outlet></route-outlet>

而且，在页面重新加载时恢复当前选项卡也是不错的。

tab: number = 0;

constructor(public router: Router, public route: ActivatedRoute) {}

ngOnInit() {
    this.tab = this.route.snapshot.params['tab'];
}

onTab(event: MatTabChangeEvent) {
    this.tab = event.index;
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
    const url = decodeURIComponent(this.router.url);
    this.router.navigate([url.substr(0, url.lastIndexOf("/")), event.index]);
}

在HTML中

<mat-tab-group [selectedIndex]="tab" (selectedTabChange)="onTab($event)"/>

- Vlad