I have a button on which when you click a menu should open in an animated way and then one by one also icons should appear inside that menu.

In below screenshot you can see I have mostly achieved it, but strange things happen if you start to press the " " button a little bit faster for example, you can see after opening the menu second time the right most two icons already kind of show up, which should not happen because they should show one by one.

Screenshot

Here is demo:

HTML:

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;
}

I would appreciate some help because I am kind of stuck, don't know what can be causing this? I think it must be react related because I am somewhat sure I have got the CSS part correct.

I even noticed if I temporarily remove the transitionDelay's from the JSX, then this kind of problem disappears. So why does this happen with transitionDelay's? (ps I need transition delays)

CodePudding user response：

You must set equal time for transitionDelay when item are not active. You need to change the following line:

<div className="menu-item" style={{ transitionDelay:active ? "1s":"0s" }}>
    {" "}
    <DingdingOutlined />
</div>
<div className="menu-item" style={{ transitionDelay:active ? "1.5s":"0s"}}>
    {" "}
    <TwitterOutlined />
</div>
<div className="menu-item" style={{ transitionDelay:active ? "2s":"0s"}}>
    {" "}
    <GoogleOutlined />
</div>

Demo

Sync you use transitionDelay it affect both transition start and end when you press collapse key, the delay applied on item and opacity is not 0, because of delay. If you click on expand button faster than 1.5s or 2s, since the opacity is not set yet, the item is visible.