Отключить все CSS анимации в полимере

Question

У меня есть полимерное веб-приложение с множеством CSS-анимаций, все они инкапсулированы в различных пользовательских элементах (используя shadow dom).

Я бы хотел добавить опцию для отключения всех CSS-анимаций.Каждый компонент включает в себя общий стиль документа CSS.

Как лучше всего условно отключать / включать все анимации без редактирования каждого пользовательского элемента?Если я добавлю следующий CSS в документ с общим стилем, все анимации будут отменены:

: host * {transition: none! Important}

Но я хочу добавить его в случае localstorage («DisableAnimations») - это правда.

Answer 1

Вы должны написать поведение или миксин (зависит от вашей версии полимера), который соблюдает localStorage и, если он имеет ожидаемое значение, вы добавляете строку css к своим компонентам.

Answer 2

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