Javascript 从输入中添加和删除类时，淡入底部边框颜色。

我尝试使用css规则设置边框底色的动画，但当类添加到元素或从元素中删除时，它不会为我设置动画。因此，当输入字段无效时，将添加类，我希望动画淡入。我使用React作为我的javascript。但是我不想用js来制作像这样简单的动画

任何人都知道为什么会这样

.group{
  border-bottom: 2px solid white;
  transition: border-bottom-color 2s;
}
.invalid,
.error {
  input,
  .group{
    color: red;
    border-bottom-color: red;
  }
}
.valid {
  input:focus {
    border-bottom-color: green;
  }
}

---

我想您的

输入也需要转换和边框底部属性


.group，
输入{
底部边框：2件纯黑；
过渡：边框底色2s；
}
.输入无效，
.无效。组，
.错误输入，
.error.group{
颜色：红色；
边框底色：红色；
}
.有效输入：焦点{
边框底色：#20ae80；
}

您确定在css中使用类似
.error{.group{color:red}}
的嵌套结构有效吗？您是在尝试更改react中的css还是在常规DOM中的css？@iofjuupasli是的，它的SCS和嵌套是正确的，但是感谢您的检查。帕克斯：我正试图用css修改它。我刚才提到React是我用来创建和更新元素类的库，如果输入有效或无效。谢谢Ksav。我正在从React元素中添加和删除className invalid。它显示了红色边框，但没有设置动画？我添加了标记。React所做的一切就是添加或删除输入上的无效类。正如我所说的，这在红色显示和隐藏时起作用。不起作用的是它的动画。你的问题中没有标记。上面的答案中有什么不起作用？