禁用Polymer中的所有CSS动画

Question

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

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

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

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

但是我想在localstorage（“ disableAnimations”）为true的情况下添加它。

Answer 1

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

Answer 2

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