CODEWITHSUNDEEP
cssanimationpolymer
Gil
Gil

Reputation: 55

Disable all css animations in polymer

I have a polymer web app with tons of css animations, all encapsulated inside different custom elements (using shadow dom).

I’d like to add an option for disabling all css animations. Every component includes a shared style css document.

What’s the best practice for conditionally disable/enable all animations without editing each and every custom element? If I add the following css to the shared-styled doc then all animations are cancelled:

:host * { transition: none !important }

But I want to add it in case localstorage(“disableAnimations”) is true.

Upvotes: 0

Views: 178

Answers (2)

Pascal L.
Pascal L.

Reputation: 1259

You have to write a behavior or mixin (depends on your polymer version) that observes the localStorage and if it has the value you expect you add the css line to your components.

Upvotes: 1

LDS
LDS

Reputation: 362

*,body{
  
	transition: all 0.3s ease-in-out, width 0, height 0, top 0, left 0; 
}

Upvotes: 0

Related Questions