Question

我正在学习课程，并且已经达到@keyframe级别。我正在尝试在CodePen上测试此代码。

但是不幸的是，它不起作用，您看不到任何反应。我选择了代码中的错误，因为我在PC上进行了测试，但一无所获。

我的HTML：

<div class='container'>
  <div class="btn">Click Here !</div>
  <div class='progress'>
    <div class="progress__bar"></div>
  </div>
</div>

我的SCSS：

.btn {
  background-color:pink;
  width:20%;
  padding:10px;
  color:#FFFFFF;
  text-align:center;
  margin:0 auto;
  cursor:pointer;
  margin-bottom:2rem;
  &:active {
    & > .progress__bar {
      animation:progress-bar 1000ms;
    }
  }
}

.progress {
  width:100%;
  height:25px;
  border:1px solid #000000;
}

.progress__bar {
  background-color:green;
  width:100%;
  height:20px;
  margin-top:2px;
  transform:scaleX(0);
}

@keyframes progress-bar {
  0% {
    transform:scaleX(0);
  } 
  100% {
    transform:scaleX(1);
  }
}

奇怪的是，在Jsfiddle上它也不起作用。

Answer 1

您正在按钮的CSS规则中使用> CSS组合器。仅当进度条是按钮的子级时，此方法才有效，但不是-它是按钮的同级。您可以使用~同级组合器来完成这项工作：

&:active {
  & ~ .progress .progress__bar {
    animation:progress-bar 1000ms;
  }
}

关键帧动画无法执行

1 个答案: