useEffect 沒有更新依賴值

Question

我有一個要動態編輯某些樣式的組件。 當我進入組件時，我希望它順利增長，而當我離開時，我希望它順利縮短。

這是我的代碼：

  const easing = 0.1;
  const outScale = 0.6;
  const inScale = 1;
  let targetScale = outScale;
  let elementScale = targetScale;
  let innerScale = 1 / elementScale;

  const [parentTransformStyle, setParentTransformStyle] = useState(
    `scale(${elementScale})`
  );
  const [innerTransformStyle, setInnerTransformStyle] = useState(
    `scale(${innerScale})`
  );
  const requestRef = useRef();

  const onPointOverEvent = () => {
    targetScale = inScale;
    console.log("over", inScale, targetScale);
  };

  const onPointerOutEvent = () => {
    targetScale = outScale;
    console.log("out", outScale, targetScale);
  };

  const animate = () => {
    console.log("animate", targetScale);

    elementScale += (targetScale - elementScale) * easing;
    innerScale = 1 / elementScale;

    setParentTransformStyle(`scale(${elementScale})`);
    setInnerTransformStyle(`scale(${innerScale})`);

    requestAnimationFrame(animate);
  };

  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []);

變量targetScale應該在鼠標懸停在元素中和鼠標離開元素時更新。

如果我在事件偵聽器中打印值，則該值是正確的。 但是在animate函數內部，它具有初始值。 有人可以指出我缺少的東西嗎？

Answer 1

有什么理由不能使用 CSS 轉換而不是自己制作動畫？

例子：

 function MyComponent() { const [innerTransformStyle, setInnerTransformStyle] = React.useState( `scale(${0.6})` ); const onPointOverEvent = () => { setInnerTransformStyle(`scale(${1})`); }; const onPointerOutEvent = () => { setInnerTransformStyle(`scale(${0.6})`); }; return ( <div className="parent"> <div className="element" style={{transform: innerTransformStyle}} onPointerOut={onPointerOutEvent} onPointerOver={onPointOverEvent}></div> </div> ); } ReactDOM.render(<MyComponent/>, document.getElementById("app"));

 .parent { width: 100px; height: 100px; background-color: #f00; } .element { width: 100px; height: 100px; background-color: #0f0; transition: transform 1s; }

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <div id="app"></div>