时间戳

首页 > 解决方案 > 如何同时转换多个元素的属性

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

问题描述

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

为了实现这一点（因为有多种类型的目标元素分布在 DOM 中），我一直在尝试使用类似这样的东西来应用过渡。

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

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

这种方法在 Firefox 中有效（所有元素按预期同步转换），但在 Safari 和 Chrome 中，一些转换似乎在等待其他转换完成后再触发（这个 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;

    }

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

谢谢！

标签： csscss-transitions

解决方案

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

  1. 字体大小以相对单位 (em) 清除
  2. Div1、Div2 和 Div3 是彼此的子孙。

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

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

  1. 如果将 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>

推荐阅读