如何在第一次加載頁面期間使用useState在不啟動影片的情況下向前和向后單擊影片顏色（關鍵幀）的變化？

我遇到了一個棘手的問題。

我有一個容器，點擊它時會被著色。單擊它會導致將資料發送到陣列，但這不是問題。

單擊它也會影片顏色的變化。影片將在單擊時向前觸發，如果再次單擊容器則向后觸發。

問題是影片是使用 useState （布林值）有條件地觸發的，因此，第二個影片將在頁面加載時已經運行，甚至在單擊容器之前。我想知道影片播放狀態樣式，但這似乎還不夠。

這是可編輯的演示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>
    </>
  );
}

uj5u.com熱心網友回復：

您已經得到了一些有效的答案，但是如果您正在尋找一種不同的方法，您可以使用第三個值（例如“IDLE”）來管理影片狀態：

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;
          `
        : ""
    }
  };
}
  `
);

   

這種方法的優點是您可以AnimStatus在所有影片中重復使用它作為界面，并輕松為“IDLE”添加特定效果

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

uj5u.com熱心網友回復：

您可以定義一個狀態變數startAnimation，默認情況下設定為 false。

當用戶單擊click it to continue然后將其設定為 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};
    }

    `
  );

uj5u.com熱心網友回復：

我能想到的最簡單的解決方法是將初始 activeDiv 狀態設定為null并將影片規則更改為：

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

現在啟動時不會有任何影片，但如果 activeDiv 不為空，它將影片。

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

標籤：javascript 反应 动画 状态 CSS动画

上一篇：Pyspark，將子字串作為整個單詞查找

下一篇：通過c#腳本創建統一的2d影片