0

I am tasked with making an Angular component for my company's apps which would provide a toggle to stop any and all animations in the app, for accessibility reasons.

Note that I don't have the luxury of going into each app and modifying their code; I am trying to create a component that can stop the animation regardless of how they coded it.

Typically, the apps don't have much animation, but it could be in the form of carousels, CSS, SVG (including D3 charts).

I can't seem to find a solution to simply force all of them to stop with Javascript, although there seem to be some accessibility widgets that purport to do this.

I can only find examples online of how to stop an animation if I'm the one creating it in the first place.

I realize there are many ways they may create animations an there's no one way to stop them all, but perhaps I can attack them several different ways?

Steve
  • 14,401
  • 35
  • 125
  • 230
  • Long story short: You can't. There's so many different ways to animate something. From pure JS over CSS. – Philipp Meissner Jul 26 '22 at 10:38
  • How are they doing it? Are they cheating by creating the carousel a certain way? https://userway.org – Steve Jul 26 '22 at 10:41
  • 1
    If your animations is about Angular: https://angular.io/guide/transition-and-triggers#disabling-all-animations (if you use css transition I'm afraid you need change the .css) – Eliseo Jul 26 '22 at 10:53

1 Answers1

0

As mentioned by @Eliso in the comment you can use @.disabled binding to disable animation however it would disable CSS transition. To disable CSS transition you can use same ng-animate-disabled class to disable all element transition

Add this in style.scss

.ng-animate-disabled *{
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

Sample Working Example

Reference

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
  • Thanks. Is there way to add the hostBinding to app.component.ts from my component, without me having access to manually edit the actual app.component.ts file? – Steve Jul 26 '22 at 11:18
  • You can't add host binding dynamically from other component without defining hostbinding in app.component. Why can't you make any changes in app.component file? – Chellappan வ Jul 26 '22 at 11:22
  • I was attempting to provide a component the dev teams could add without otherwise needing to change their code. This might not be possible. – Steve Jul 26 '22 at 12:04
  • 1
    you can create directive with same selector name as root component then inside directive you can use HostListener – Chellappan வ Jul 26 '22 at 12:06