런타임에 Angular 애니메이션 비활성화

멋진 새 기능이 Angular v12에 추가됩니다 - 런타임에 Angular 애니메이션 비활성화 지원 🎉

참고: 이 기능은 v12.0.0-next.3에 추가되었습니다.

지금까지 Angular 애니메이션을 비활성화하는 유일한 방법은 NoopAnimationsModule 을 제공하는 것이었습니다. 그러나이 접근 방식에는 한 가지 큰 제한이 있습니다. 빌드 시간 동안 모든 애니메이션을 완전히 비활성화합니다. 따라서 애니메이션을 사용하거나 사용하지 않고 앱을 빌드합니다. 앱이 부트스트랩될 때와 같이 이 결정을 나중 시점으로 연기할 수 없었습니다.

다행히도 이것은 변화하고 있습니다. v12에서는 config을 BrowserAnimationsModule 에 전달할 수 있습니다. 구성 개체는 현재 하나의 속성( disableAnimations )만 지원합니다. true로 설정하면 애니메이션이 비활성화됩니다. 멋진 점은 앱이 부트스트랩되는 동안 런타임에 이를 수행할 수 있다는 것입니다!

왜 사용하시겠습니까?

앱에서 애니메이션을 비활성화하는 몇 가지 사용 사례가 이미 있을 수 있습니다. 대단해!

제 생각에 떠오르는 또 다른 사용 사례는 불필요한 움직임의 양을 최소화하기 위해 사용자의 기본 설정을 존중하여 앱의 접근성을 높이는 것입니다.

사용자가 전환할 수 있는 OS/브라우저 설정이 있으며, 이는 사용자가 움직임 감소를 선호한다고 앱에 알립니다. prefers-reduced-motion CSS 미디어 쿼리를 사용하여 해당 신호를 캡처할 수 있습니다.

"하지만 TypeScript 파일이 있고 이것은 CSS 미디어 쿼리입니다. 어떻게 결합합니까?"라고 말하는 것을 들었습니다. 두려워 말라! matchMedia 메서드를 사용하여 문자열이 특정 미디어 쿼리와 일치하는지 확인할 수 있습니다. matchMedia는 문서가 현재 미디어 쿼리 목록과 일치하는 경우 MediaQueryList로 설정된 matches 속성이 있는 true 을 반환하고 일치하지 않는 경우 false를 반환합니다.

실제로 작동하는 것을 봅시다(이 항목도 확인하십시오StackBlitz).

import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

export function prefersReducedMotion(): boolean {
  const mediaQueryList = window.matchMedia("(prefers-reduced-motion)");

  return mediaQueryList.matches;
}

@NgModule({
  imports: [
    BrowserAnimationsModule.withConfig({
      disableAnimations: prefersReducedMotion()
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

다음은 Windows에서 작동하는 방법에 대한 데모입니다.



다른 OS에서 애니메이션을 비활성화하는 방법을 보려면 MDN의 prefers-reduced-motion 문서를 확인하세요.

명심해야 할 한 가지는 앱이 부트스트래핑을 완료하면 더 이상 애니메이션을 다시 비활성화/활성화할 수 없다는 것입니다.

이에 감사드립니다contribution.