Question

---编辑2 ----

这是另一个示例视频，如果问题及其在我的应用程序中的行为有多奇怪。再说一次，我不知道如何找出问题所在

我有一个班级名称为side-btn的div

它的动画不符合我的想法，我不确定为什么。动画很容易改变阴影：

.side-btn {
  height: 100px;
  width: 100px;
  background-colour: white;
  box-shadow: 0 0 0 0 black;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 black;
  }
  70% {
      box-shadow: 0 0 10px 20px black;
  }
  100% {
      box-shadow: 0 0 0 0 black;
  }
}


<div class="side-btn"></div>

我正在关注这个pulse animation

在此代码snipit中，它的行为符合预期。我在reactJS应用程序中使用它。我在我的js应用程序和确切的CSS中使用了它，它的行为完全不同。盒子会变大并缩小。没有其他脉冲动画。我也无法重新创建此错误。

function Sidebar(props) {
  return (
    <nav className = {"sidebar" + (props.active ? "" : " hidden")}>
      <div class="side-btn"></div>
    </nav>
  )
}

我检查了元素，好像div面的大小只是在增长和缩小。我什至不知道如何调试它。

-编辑：

我已经创建了一个代码沙箱，并使用了溢出的代码片段，它们可以按预期工作。同样，一旦我将其放入我的react应用程序中，就会得到这个结果。我做了一个短片来展示。我无法确定为什么会这样。

我添加的唯一不同的代码是，side-btn包裹在一个“ sidebar”容器中，该容器只是将其居中放置并稍微移开屏幕。

.sidebar {
  position: fixed;
  top:50vh;
  left:-35px;
}

https://imgur.com/a/BtpGH4q

Answer 1

它正在更改框阴影而不是框的大小。如果仔细观察，您可能会注意到。您可以看到div的大小保持不变。只是阴影在扩大和收缩。在上面的示例中，模糊和散布区域较高（模糊度相对较低），因此看起来像是在其周围形成了边框，而不是盒子阴影。为了清楚起见，请运行下面与您的代码段相似的代码段：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.side-btn {
  height: 100px;
  width: 100px;
  background-color: white;
  box-shadow: 0 0 0 rgba(0,0,0,1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,0,0.7);
  }
  70% {
      box-shadow: 0 0 0 10px rgba(0,0,0,0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
}

<div class="container">
  <div class="side-btn"></div>
</div>

Answer 2

您必须指定阴影颜色的Alpha，以实现褪色效果。

因此，应该使用black和rgba(0,0,0,1)来代替rgba(0,0,0,0)：

.side-btn {
  height: 100px;
  width: 100px;
  background-colour: white;
  box-shadow: 0 0 0 0 black;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,0,1);
  }
  70% {
      box-shadow: 0 0 10px 20px rgba(0,0,0,0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
  
}

<div class="side-btn"></div>

框阴影动画会更改大小

2 个答案: