[Angular] Material 애니메이션 중지

기본적으로 적용된 모든 애니메이션 또는 특정 Material 요소의 애니메이션을 중지하고자 할 때, 몇 가지 간단한 제어 방법을 사용할 수 있습니다.

Component에서 Material 애니메이션 중지하기

원하는 애니메이션을 중지하려는 대상 요소를 식별합니다.



해당 요소에 애니메이션을 비활성화하기 위해 [@.disabled]="true" 속성을 추가합니다.

이로써 해당 요소의 애니메이션이 간단하게 중지됩니다.



아래는 구체적인 사용 예시입니다.

{% raw %}
<mat-tab-group [@.disabled]="true">
</mat-tab-group>
{% endraw %}

주의사항: 다만, 만약 애니메이션을 중지하고자 하는 요소가 다른 mat-tab-group 내부에 존재한다면, 이러한 설정이 오히려 원치 않는 버그를 초래할 수 있으니, 원활한 동작을 보장하기 위해 반드시 최상위 mat-tab-group에만 [@.disabled]="true" 속성을 적용해야 합니다.

글로벌에서 Material 애니메이션 중지하기

글로벌에서 Material 애니메이션을 조절하기 위한 방법은 각 Material Component의 GLOBAL_OPTIONS를 통해 설정하는 것입니다.
이 글에서는 Ripple를 기준으로 Module과 Standalone일 때 각각 어떻게 설정하는지 알아보겠습니다.

Module

import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';

@NgModule({
  providers: [
    {
      provide: MAT_RIPPLE_GLOBAL_OPTIONS,
      useValue: { disabled: true }
    }
  ]
})
export class AppModule { }

Standalone Components

Standalone Component로 개발한 경우 모듈이 없으므로 각각의 Component에서 설정하거나 main.ts와 같은 글로벌 파일에서 설정할 수 있습니다.

개별 Standalone Component

import { Component } from '@angular/core';
import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';

@Component({
  selector: 'app-my-standalone',
  standalone: true,
  imports: [MatTabsModule],
  providers: [
    // Use this to disable animations for this component
    provideNoopAnimations()
    // Or use this to enable animations
    // provideAnimations()
  ],
  template: `
    <mat-tab-group>
      <mat-tab label="First"> Content 1 </mat-tab>
      <mat-tab label="Second"> Content 2 </mat-tab>
    </mat-tab-group>
  `
})
export class MyStandaloneComponent {}

main.ts에서 글로벌 설정

main.ts 파일을 열어 다음과 같이 설정합니다:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    // Choose one of these:
    provideNoopAnimations(), // Disable all animations
    // provideAnimations()  // Enable animations
  ]
}).catch(err => console.error(err));