Disable animation in Angular 2 Material

问题

My question is how we can disable button or checkbox animation in angular material widgets?

There are some css solutions to override transition with none but it s not working.

Thanks,

回答1:

You can disable animation using @.disabled property which is introduced in angular 4.3.1.

Either add below code to your component

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

or in your html

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

Here is working plnkr https://plnkr.co/edit/sVJM8H?p=preview

回答2:

try this:

<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>

回答3:

Another approach is a hackie with route navigation (find a place later to change returned value)

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

This will be same as *ngIf condition but also it's important to define a route param, e.g. :tab

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

And of corse you should use <route-outlet></route-outlet>

And also it'll be nice to restore current tab on page reload

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]);
}

And in html

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

来源：https://stackoverflow.com/questions/43745877/disable-animation-in-angular-2-material

标签

angular

angular-material2