jquery - CSS过渡颜色渐进

Question

背景:

• 我正在使用 ReactJS 构建我的应用。
• 按照 Facebook 的建议，我尽可能避免使用 JQuery。
• 我没有使用 ReactTransitionGroup 插件，只是纯 CSS

这就是我要找的:

但我不知道如何在不通过 JQuery 迭代元素的情况下获得这种效果。

这就是我现在所拥有的，如您所见，这与我的期望相去甚远。要尝试它，只需选中/取消选中该复选框。

.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
  margin-right: 10px;
}

#check:checked ~ .dot.chk {
  background-color: blue;
  transition: all 500ms ease-in 500ms;
}

<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

问题:

1. 我可以使用纯 CSS 实现它吗？
2. 如果唯一可能的方法是使用 JQuery，我应该记住什么才能找到好的解决方案？

Answer 1

虽然此方法可能有点广泛，但它应该适合您的目的。

.dot-container{
  display: flex;
  flew-direction: row;
}

.dot{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
  margin-right: 10px;
}

#check:checked ~ .dot.chk {
    background-color: blue;
}

#check:checked ~ .dot.chk:nth-child(2) {
  transition: all 500ms ease-in 300ms;
}

#check:checked ~ .dot.chk:nth-child(3) {
  transition: all 500ms ease-in 500ms;
}

#check:checked ~ .dot.chk:nth-child(4) {
  transition: all 500ms ease-in 700ms;
}

#check:checked ~ .dot.chk:nth-child(5) {
  transition: all 500ms ease-in 900ms;
}

#check:checked ~ .dot.chk:nth-child(6) {
  transition: all 500ms ease-in 1100ms;
}

#check:checked ~ .dot.chk:nth-child(7) {
  transition: all 500ms ease-in 1300ms;
}

#check:checked ~ .dot.chk:nth-child(8) {
  transition: all 500ms ease-in 1500ms;
}

#check:checked ~ .dot.chk:nth-child(9) {
  transition: all 500ms ease-in 1700ms;
}

#check:checked ~ .dot.chk:nth-child(10) {
  transition: all 500ms ease-in 1900ms;
}

#check:checked ~ .dot.chk:nth-child(11) {
  transition: all 500ms ease-in 2100ms;
}

<div class="dot-container">
  <input type="checkbox" id="check" />
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot chk"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

通过使用 nth-child(n)，您可以为每个点指定特定的过渡。通过更改第四个参数，transition-delay，您可以实现您想要的外观。