点击父Div时实现Checkbox与Div一致的过渡动画问题求助

我希望实现点击父Div时，Checkbox能产生1秒的动画效果。目前点击父Div时，Div的动画符合预期，但Checkbox仅在:active状态下生效，如何让Checkbox的过渡效果与Div保持一致？我是参考一篇文章实现Div的:active状态动画的。

现有代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="btn btn-option">
      <span>Good</span><input type="checkbox" class="survey-checkbox" />
    </div>
  </body>
</html>

CSS代码 #

* {
  box-sizing: border-box;
}
.btn-option {
  width: 330px;
  padding: 12px 24px;
  margin: auto;
  border-radius: 8px;
  background-color: transparent;
  color: #4c4c4c;
  visibility: visible;
  border: 1px solid #d2d2d2;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* transition */
  transition: filter 0.3s ease 0.3s;
}

.survey-checkbox {
  position: relative;
}

.survey-checkbox::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: #efefef;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.option-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .btn-option {
    width: 280px;
  }
}
.btn-option:active {
  filter: drop-shadow(0 0 0 steelblue);
  transition: filter 0s;
}
.btn-option:active {
  background: #fcece8;
  border: 1px solid #e76943;
}
.btn-option:active .survey-checkbox::before {
  background-color: #e76943;
}
.btn-option:not(:active) {
  transition: all 1000ms step-end;
}

.survey-checkbox::before:active {
    background-color: #e76943;
}

.btn-option:active {
    animation: all 1s forwards linear;
}

解决方法 #

核心问题是Checkbox的伪元素未设置过渡属性，且父元素的过渡逻辑未传递到子元素。修改如下：

修改后的CSS代码 #

* {
  box-sizing: border-box;
}
.btn-option {
  width: 330px;
  padding: 12px 24px;
  margin: auto;
  border-radius: 8px;
  background-color: transparent;
  color: #4c4c4c;
  visibility: visible;
  border: 1px solid #d2d2d2;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: filter 0.3s ease 0.3s;
}

.survey-checkbox {
  position: relative;
}

.survey-checkbox::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: #efefef;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 给伪元素添加过渡，和父元素非active状态的过渡时长一致 */
  transition: all 1000ms step-end;
}

.option-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .btn-option {
    width: 280px;
  }
}

/* 合并重复的:active样式 */
.btn-option:active {
  filter: drop-shadow(0 0 0 steelblue);
  transition: filter 0s;
  background: #fcece8;
  border: 1px solid #e76943;
}

.btn-option:active .survey-checkbox::before {
  background-color: #e76943;
}

.btn-option:not(:active) {
  transition: all 1000ms step-end;
}

关键修改说明 #

• 给.survey-checkbox::before添加transition: all 1000ms step-end;，让它的背景色变化跟随1秒的过渡时长，和父Div动画保持同步
• 合并重复的.btn-option:active样式，避免代码冗余
• 移除无效的.survey-checkbox::before:active（伪元素无法直接响应:active，必须通过父元素状态控制）和无意义的animation定义（all不是有效的动画名称）

修改后，点击父Div时，Checkbox的背景色变化会和Div的背景、边框变化一样，拥有1秒的过渡动画效果。

内容的提问来源于stack exchange，提问作者Manish Kuswhaha