我有一个按钮，当你点击一个菜单应该打开在一个动画的方式，然后 * 一个接一个也图标应该出现在菜单内 *。
在下面的屏幕截图中，你可以看到我已经基本实现了它，但奇怪的事情发生，如果你开始按下“+”按钮有点快，例如，你可以看到打开菜单后，第二次最右边的两个图标已经显示出来，这不应该发生，因为他们应该一个接一个地显示。
Screenshot
下面是demo：
于飞：

const AnimatedActionMenu = (props) => {
  let [active, setActive] = React.useState(false);
  return (
    <div className="animated-action-menu">
      <div className={active ? 'container active' : 'container'}>
        <div className="menu">
          <div className="menu-item" style={{ transitionDelay: '1s' }}>
            {' '}
            <DingdingOutlined />
          </div>
          <div className="menu-item" style={{ transitionDelay: '1.5s' }}>
            {' '}
            <TwitterOutlined />
          </div>
          <div className="menu-item" style={{ transitionDelay: '2s' }}>
            {' '}
            <GoogleOutlined />
          </div>
        </div>
        <div
          className="toggle"
          onClick={() => {
            setActive(!active);
          }}
        ></div>
      </div>
    </div>
  );
};

CSS：

html,
body,
#root {
  height: 100%;
}

.animated-action-menu {
  display: flex;
  background-color: goldenrod;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.animated-action-menu .container {
  position: relative;
  z-index: 1;
}

/* Toggle related animations */

.animated-action-menu .container .toggle {
  background: white;
  border-radius: 50%;
  height: 72px;
  width: 72px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animated-action-menu .container .toggle:before {
  content: '+';
  font-size: 32px;
  transition: transform 1.5s;
}
.animated-action-menu .container.active .toggle:before {
  transform: rotate(225deg);
}

/* Menu related animations */

.animated-action-menu .container .menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 16px;
  width: 16px;
  background-color: red;
  transition: transform 0.5s, width 0.5s, height 0.5s;
  transition-delay: 1s, 0.5s, 0.5s;
  border-radius: 100px;
  z-index: -1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1-px;
}

.animated-action-menu .container.active .menu {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -150px);
  height: 80px;
  width: 250px;
  transition-delay: 0s, 0.5s, 0.5s;
}

/* Menu item animations */

.animated-action-menu .container .menu .menu-item {
  transition: 1s;
  transform: translateY(-30px);
  opacity: 0;
}

.animated-action-menu .container.active .menu .menu-item {
  transform: translateY(0px);
  opacity: 1;
}

我很感激一些帮助，因为我有点卡住了，不知道是什么原因导致的？我想这一定是React相关的，因为我有点确定我已经得到了CSS部分的正确。
我甚至注意到如果我暂时从JSX中删除transitionDelay的**，**那么这种问题就会消失。那么为什么transitionDelay会发生这种情况呢？（ps我需要转换延迟）