How to disable mat-spinner out animation

Question

The Angular Material spinner that i have implemented has got an animation out which makes it go down before vanishing. Is there a way to unable this animation? This is the code: I tried with the keyframes but it doesn't work.

<mat-spinner style="margin: auto; margin-top: 10%"></mat-spinner>

  @keyframes slideDown {
    0% {}
    100% {
        transform: translateY(20%);
    }
}

.cdk-overlay-pane {
    transform: translateY(-250%);
    animation: slideDown 0.5s forwards 0s ease-in;
}

.cdk-overlay-container>* {
    transition: none;
}

this may help https://stackoverflow.com/questions/50385136/how-to-disable-animations-in-angular-material — Palak Jadav, May 14 '19 at 10:33

score 1 · Answer 1 · answered May 13 '19 at 12:26

1

Add "BrowserAnimationsModule" in your @NgModule imports array, and remove "NoopAnimationsModule" if you have it there.

@NgModule({
declarations: [..],
imports: [
    ..
    BrowserAnimationsModule,
    ..
]
})

answered May 13 '19 at 12:26

Akshay Rana

1,455
11
20

I already have the BrowserAnimationsModule there and there is no NoopAnimationsModule too. – Scott Thushy May 13 '19 at 12:34
@ScottThushy Please add more source code in the question. – Akshay Rana May 13 '19 at 14:49

How to disable mat-spinner out animation

1 Answers1