Components: Mat-tab animation is not working

[joelharisonlobo]

Bug, 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.

[julianobrasil]

There are many issues aparently related to this one: #5269, #7274, #5932, #5505, #5503

[joelharisonlobo]

Your answer is not valid one. none of those issues are related to mine. Can i have more clarity on this issue?

[julianobrasil]

Sorry, @joelharisonlobo, I've jumped too fast to conclusion. Your issue is not related to the issues I listed. Could you give more info? Does it work anywhere else in your app, I mean, do you have any more tab-groups that are working fine?

[josephperrott]

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.

[joelharisonlobo]

@julianobrasil Thanks for your quick support ,I haven't used anywhere else in this project. But i have used it in my previous project but there also it had the same behaviour.U can check that in www.pirevolutions.com in that goto about us and click more then u can see that. i made that website for learning purpose.

[julianobrasil]

What about @josephperrott's comment?

[joelharisonlobo]

@josephperrott i have used both NoopAnimationsModule,BrowserAnimationsModule. so is that the problem?

[joelharisonlobo]

@josephperrott , Thanks for your support . i have removed noop animations form my project and it worked. but one scroll bar is coming in between the tabs.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}