css - 禁用 polymer 中的所有 css 动画

Question

我有一个带有大量 css 动画的 polymer web 应用程序，所有这些动画都封装在不同的自定义元素中(使用 shadow dom)。

我想添加一个选项来禁用所有 css 动画。 每个组件都包含一个共享样式的 css 文档。

在不编辑每个自定义元素的情况下有条件地禁用/启用所有动画的最佳做法是什么？ 如果我将以下 css 添加到共享样式的文档中，则所有动画都会被取消:

:host * { transition: none !important }

但我想添加它以防 localstorage(“disableAnimations”) 为真。

Answer 1

您必须编写一个行为或混合(取决于您的 polymer 版本)来观察 localStorage，如果它具有您期望的值，则将 css 行添加到您的组件。