Question

我一直在尝试同时转换多个元素的背景色（和其他一些属性）。

要实现这一点（由于在DOM中分布了许多类型的目标元素），我一直在尝试使用类似这样的过渡。

    .dark-mode-transition * {
      transition-property: background-color, border-color, color;
      transition-duration: 0.5s;
    }

计划是在过渡之前将dark-mode-transition类添加到顶层，然后在过渡之后将其删除。

此方法在Firefox中有效（所有元素都按预期同步转换），但在Safari和Chrome中，某些转换似乎在等待其他转换触发之前完成（this JS Fiddle演示了问题）。

以前有人遇到过这样的问题吗？我缺少其他方法吗？任何输入将不胜感激！

我知道所有目标选择器都可以这样列出

    .dark-mode-transition .some-class,
    .dark-mode-transition .some-other-class,
    .dark-mode-transition .yet-another-class {

        transition-property: background-color, border-color, color;
        transition-duration: 0.5s;

    }

但是我希望避免对每个组合进行硬编码。

谢谢！

Answer 1

您的代码中有两个主要问题。

以相对单位（em）清除字体大小
Div1，Div2和Div3是彼此的子代。

问题是，每个div的字体大小都根据其父div而变化。

可能的解决方案。 1.如果需要div之间的父子关系，则将font-size unite更改为px。

如果没有问题，将div彼此分开，然后将一个接一个的添加为兄弟。那么您可以使用相对单位来表示字体大小。

注意：对于大量同时触发转换的项目，请不要全部使用转换属性。它会造成性能问题。

如果要在大量元素上添加过渡，也请尽量避免使用*选择器。定义要更改的特定属性。它还可以提高性能。

选项一-分隔div

.large .animate {
  font-size: 3em;
}

.animate {
  transition: font-size 0.5s;
}

body {
  font-size: 1em;
  font-family: sans-serif;
}

button {
  margin-bottom: 25px;
}

<button onclick="document.getElementById('text-container').classList.toggle('large')">Toggle</button>
<div id="text-container">
  <div id="one" class="animate">
    One

  </div>
  <div id="two" class="animate">
    Two
  </div>
  <div id="three" class="animate">
    Three
  </div>
  <div id="four">
    Four
  </div>
</div>

选项二-将字体大小更改为px。

但是这种方法存在问题。当它返回到初始状态时。过渡将一一触发。但相同的兄弟姐妹会同时触发。

.large .animate {
  font-size: 48px;
}
    
.animate {
  transition: font-size 0.5s;
 }

body {
  font-size: 16px;
  font-family: sans-serif;
}

button {
  
  margin-bottom: 25px;
  
}

<button onclick="document.getElementById('text-container').classList.toggle('large')">Toggle</button>
<div id="text-container">
  <div id="one" class="animate">
      One
      <div id="two" class="animate">
          Two
          <div id="three" class="animate">
              Three
              <div id="four" class="animate">
              Four
            </div>
          </div>
      </div>
  </div>
</div>

如何同时转换多个元素上的属性

1 个答案:

选项一-分隔div

选项二-将字体大小更改为px。