如何在第一次加载页面时使用USESTATE进行动画更改（密钥帧），然后单击USESTATE，而无需启动动画？

Question

我有一个棘手的问题。

我有一个容器在点击它时被着色。 单击它将导致将数据发送到数组，但这不是问题。

单击它也将使颜色的更改动画。动画将在单击时向前触发，如果将再次单击容器，则向后触发。

问题在于，动画是通过使用Usestate（Boolean）有条件地触发的，因此，在加载页面时，第二个动画甚至在单击容器之前就会运行。 我想知道动画状态风格，但这似乎还不够。

这是可编辑的演示 https://qeevsk.csb.app/ 有什么想法，也许有更好的侵犯？

代码本身：

    const [activeDiv, setDivState] = useState(false);
    
      const BigDiv = styled("div")(
        ({ theme, activeDiv }) => css`
          min-width: 220px;
          height: 100%;
          position: relative;
          padding: ${theme.spacing(2, 0)};
          border-bottom: red 4px solid;
          background-color: transparent;
          cursor: pointer;
          text-align: center;
          transition-delay: 0.5s;
        will-change: transform;

    ::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: ${activeDiv ? "red" : "transparent"};
      animation: ${activeDiv ? setColor("red") : unsetColor("red")}
        0.5s ease ;
      transform-origin: bottom center};
    }

    `
  );

  const setColor = (colorTo) => keyframes` 
  0% {transform: scaleY(0); }
  100% {transform: scaleY(1); background-color: ${colorTo}} 
`;
  const unsetColor = (colorFrom) => keyframes`
  0% {transform: scaleY(1); background-color: ${colorFrom}}
  100% {transform: scaleY(0); background-color: transparent;}
 
`;

  const SecondDiv = styled("div")(
    ({ theme, activeDiv, color }) => css`
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      z-index: 1;
    `
  );

  return (
    <>
      <BigDiv
        activeDiv={activeDiv}
        onClick={(e) => {
          setDivState(!activeDiv);
        }}
      >
        <SecondDiv>
          <p>Click to animate</p>
        </SecondDiv>
      </BigDiv>
    </>
  );
}

Answer 1

您已经得到了一些有效的答案，但是如果您正在寻找一种不同的方法，则可以管理使用第三个值之类的动画状态：

const AnimStatus = {
  IDLE: -1,
  INACTIVE: 0,
  ACTIVE: 1
};

// the status will be handled like this:
const [divStatus, setDivStatus] = useState(AnimStatus.IDLE);

  <BigDiv
    divStatus={divStatus}
    onClick={(e) => {
      setDivStatus((prev) =>
        prev === AnimStatus.INACTIVE || prev === AnimStatus.IDLE
          ? AnimStatus.ACTIVE
          : AnimStatus.INACTIVE
      );
    }}
  />
  
// in the css animation
const BigDiv = styled("div")(
  ({ theme, divStatus }) => css`
    /* BigDiv CSS properties */

  ::after {
  /* Other ::after CSS properties */
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    ${
      divStatus !== AnimStatus.IDLE
        ? css`
            background-color: ${divStatus === AnimStatus.ACTIVE
              ? "red"
              : "transparent"};
            animation: ${divStatus === AnimStatus.ACTIVE
                ? setColor("red")
                : unsetColor("red")}
              0.5s ease;
          `
        : ""
    }
  };
}
  `
);

   

这种方法的优势是您可以重复使用此andy> animstatus在所有动画中都作为接口，并轻松地为“空闲”添加特定效果，

这是我的演示： https://codesandbox.io/s/animate-divs-forked-u2oltp

Answer 2

您可以定义一个状态变量，例如startAnimation，并默认设置为false。

当用户单击单击它继续时，将其设置为true，然后将动画应用

在

const [startAnimation, setStart] = useState(false);

组件中

<BigDiv
        activeDiv={activeDiv}
        startAnimation={startAnimation}
        onClick={(e) => {
          setStart(true);
          setDivState(!activeDiv);
        }}
      >
        <SecondDiv>
          <p>Click to animate</p>
        </SecondDiv>
      </BigDiv>
    </>

使用，将其传递到类似的组件中

const BigDiv = styled("div")(
    ({ theme, activeDiv, startAnimation }) => css`
      min-width: 220px;
      height: 100%;
      position: relative;
      padding: ${theme.spacing(2, 0)};
      border-bottom: red 4px solid;
      background-color: transparent;
      cursor: pointer;
      text-align: center;
      transition-delay: 0.5s;
    will-change: transform;

    ::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: ${activeDiv ? "red" : "transparent"};
      animation: ${
        startAnimation ? (activeDiv ? setColor("red") : unsetColor("red")) : ""
      }
        0.5s ease ;
      transform-origin: bottom center};
    }

    `
  );

Answer 3

我能想到的最简单的修复是将初始的Activediv状态设置为null，然后将动画规则更改为：

animation: ${activeDiv ? setColor("red") : unsetColor("red")} ${activeDiv === null ? "0" : "0.5s ease"} ;

现在在启动时不会有任何动画，但是如果Activediv是任何动画。

这是我的叉子： https://codesandbox.io/s.io/s/animate-divs-divs-forked-forked- -gth814