CSS过渡颜色渐进 背景： 我正在使用ReactJS构建我的应用程序 正如Facebook推荐的那样，我尽量避免使用JQuery 我没有使用ReactTransitionGroup插件，只是使用纯CSS 这就是我要找的：

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

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

.dot容器{
显示器：flex；
飞行方向：行；
}
多特先生{
显示：内联块；
宽度：50px；
高度：50px；
背景颜色：灰色；
边界半径：100%；
右边距：10px；
}
#检查：已检查~.dot.chk{
背景颜色：蓝色；
过渡：所有500ms在500ms内缓和；
}

---

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

.dot容器{
显示器：flex；
飞行方向：行；
}
多特先生{
显示：内联块；
宽度：50px；
高度：50px；
背景颜色：灰色；
边界半径：100%；
右边距：10px；
}
#检查：已检查~.dot.chk{
背景颜色：蓝色；
}
#检查：已检查~.dot.chk:n子项（2）{
过渡：所有500ms在300ms内缓解；
}
#检查：已检查~.dot.chk:n子项（3）{
过渡：所有500ms在500ms内缓和；
}
#检查：已检查~.dot.chk:n子项（4）{
过渡：所有500毫秒都在700毫秒内轻松过渡；
}
#检查：已检查~.dot.chk:n子项（5）{
过渡：所有500毫秒在900毫秒内缓解；
}
#检查：已检查~.dot.chk:n子项（6）{
过渡：所有500毫秒在1100毫秒内缓解；
}
#检查：已检查~.dot.chk:n子项（7）{
过渡：所有500毫秒都在1300毫秒内轻松过渡；
}
#检查：已检查~.dot.chk:n子项（8）{
过渡：所有500ms在1500ms内缓解；
}
#检查：已检查~.dot.chk:n子项（9）{
过渡：所有500毫秒在1700毫秒内缓解；
}
#检查：已检查~.dot.chk:n子项（10）{
过渡：所有500毫秒在1900毫秒内缓解；
}
#检查：已检查~.dot.chk:n子项（11）{
过渡：所有500毫秒在2100毫秒内缓解；
}

---

考虑到点的数量有限（本例中为10个），我将使用相邻的子选择器应用转换延迟

正文{
背景：#f6f6f6；
}
.dot容器{
显示器：flex；
飞行方向：行；
}
多特先生{
显示：内联块；
弹性：1自动；
背景：#E2；
边界半径：100%；
右边距：10px；
过渡：所有500毫秒的时间都很容易进入；
}
点：之后{
内容：''；
显示：内联块；
垂直对齐：顶部；
填充顶部：100%；
}
#检查：检查~
.点+.点
{转换延迟：500ms；}
#检查：检查~
.点+.点+.点
{转换延迟：1000ms；}
#检查：检查~
.点+.点+.点+.点+.点
{转换延迟：1500ms；}
#检查：检查~
.点+.点+.点+.点+.点+.点
{转换延迟：2000ms；}
#检查：检查~
.点+.点+.点+.点+.点+.点+.点+.点
{转换延迟：2500ms；}
#检查：检查~
.点+.点+.点+.点+.点+.点+.点+.点+.点
{转换延迟：3000ms；}
#检查：检查~
.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点
{转换延迟：3500ms；}
#检查：检查~
.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点
{转换延迟：4000ms；}
#检查：检查~
.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点+.点
{转换延迟：4500ms；}
#检查：已检查~.dot.chk{
背景色：#4ca5d0；
}

---

不完全是您想要的，但是您可以使用类型的第n个为不同的元素添加不同的转换延迟。希望能有帮助

.dot容器{
显示器：flex；
飞行方向：行；
}
多特先生{
显示：内联块；
宽度：50px；
高度：50px；
背景颜色：灰色；
边界半径：100%；
右边距：10px；
}
#检查：已检查~.dot.chk{
背景颜色：蓝色；
}
.dot.chk:n个类型（1）{
过渡：所有200ms缓进缓出0ms；
}
.dot.chk：第n种类型（2）{
过渡：所有200ms的输入输出均为200ms；
}
.dot.chk：第n种类型（3）{
过渡：所有200ms缓进缓出400ms；
}
.dot.chk：第n种类型（4）{
过渡：所有200ms缓进输出600ms；
}
.dot.chk：第n种类型（5）{
过渡：所有200ms输入输出800ms；
}
.dot.chk：第n种类型（6）{
过渡：所有200ms的输入输出均为900ms；
}
.dot.chk：第n种类型（7）{
过渡：所有200ms的输入输出均为1000ms；
}

jQuery完全不必要时不应使用，同意。然而，在我看来，“尽可能避免jQuery”也不是一个好主意。这就是为什么我说“正如Facebook推荐的那样”。在我看来，如果我决定开始使用一个框架（不管是什么框架），我决定不仅要包含明确的概念、模式和实践，还要包含隐含的概念、模式和实践。在这种情况下，如果我不能实现我想要避免使用JQuery的目的，我将使用JQuery。非常感谢。这很有效，但我觉得@Santi的回答更优雅，这就是为什么我决定接受他的回答。但是你的答案是正确的。Thanks@FacundoLaRocca非常正确。我同意他的解决方案更为优雅。当我写这篇文章的时候，我仍然处于一种沙斯或更少的循环思维中。另外两个答案肯定更干净。