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?
CodePudding user response：
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;
}