Mat-tab animation is not working
See original GitHub issueBug, feature request, or proposal: while using mat-tab animation on changing the tabs is not working.
What is the expected behavior? Tabs should be work with the animation(while changing the tabs the changed tab is coming from the left) that is in the example of angular material page .
What is the current behavior?tabs are getting changed but the animation is not there. so it looks weird.
What are the steps to reproduce?
Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master
): https://goo.gl/uDmqyY
StackBlitz starter (using latest npm
release): https://goo.gl/wwnhMV
In plunker its working perfectly. so no use of using plunker. In my ng module page i have imported MatTabsModule and impoted and exported it.
<mat-card class="card ">
<mat-toolbar>Page Cusomization</mat-toolbar>
<mat-tab-group class="demo-tab-group">
<mat-tab label="Add form fields">
<div class="demo-tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus.
</div>
</mat-tab>
<mat-tab label="Remove Form fields">
<div class="demo-tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus.
</div>
</mat-tab>
</mat-tab-group>
</mat-card>
What is the use-case or motivation for changing an existing behavior?
In material.angular.io website mat-tab is working with animation while changing the tabs the next tab is comin from right to left. when i the animation is not coming but the tabs ate changing.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/cli: 1.1.1 node: 7.10.0 os: win32 x64 @angular/animations: 4.4.5 @angular/cdk: 2.0.0-beta.12 @angular/common: 4.4.5 @angular/compiler: 4.4.5 @angular/core: 4.4.5 @angular/flex-layout: 2.0.0-beta.9 @angular/forms: 4.4.5 @angular/http: 4.4.5 @angular/material: 2.0.0-beta.12 @angular/platform-browser: 4.4.5 @angular/platform-browser-dynamic: 4.4.5 @angular/router: 4.4.5 @angular/cli: 1.1.1 @angular/compiler-cli: 4.4.5 @angular/language-service: 4.4.5
Is there anything else we should know?
I need a solution for this becase im using material design in all my project.
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (4 by maintainers)
Top GitHub Comments
Typically we see this if your module as
NoopAnimationsModule
, this prevents the animations from running, though the state is still updated as if they had run.If you are using
BrowserAnimationsModule
and still seeing this, we will need a reproduction case to be able to investigate further.There are many issues aparently related to this one: #5269, #7274, #5932, #5505, #5503