禁用聚合物中的所有 css 动画答案

【问题标题】：Disable all css animations in polymer禁用聚合物中的所有 css 动画
【发布时间】：2019-03-12 20:55:42
【问题描述】：

我有一个聚合物网络应用程序，其中包含大量 css 动画，全部封装在不同的自定义元素中（使用 shadow dom）。

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

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

:host * { 过渡：无！重要 }

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

您必须编写观察 localStorage 的行为或 mixin（取决于您的聚合物版本），如果它具有您期望的值，则将 css 行添加到您的组件中。

【讨论】：