zombie's questions

我有一个父 div，上面有“显示详细信息”按钮。它的工作原理如下：按下按钮时 -> bool 发生变化 -> 显示详细信息。

代码是这样的:(而不是blabla是巨大的div）

import React, { useState, useCallback } from 'react';

function Page() {
  const [showDetails, setShowDetails] = useState(true);

  const PurchaseComponent = () => {
    const toggleDetails = useCallback(() => {
      setShowDetails(prevShowDetails => !prevShowDetails);
    }, []);

    return (
        <div className="mydiv">
            <button onClick={toggleDetails}>
              Show Details
            </button>
            {showDetails && (
              <div>BlaBla</div>
            )}
        </div>
    );
  };

  return (
    <div>
        <PurchaseComponent />
    </div>
  );
}

export default Page;

样式表：

.mydiv {
    min-height: 250px;
    width: 800px;
    border-radius: 10px;
    padding: 50px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #4d474f, #282f32, #371211, #7d1416, #850b0f, #40080a, #850b0f, #7d1416, #371211, #282f32, #4d474f);
    background-size: 2200% 2200%;

    -webkit-animation: AnimationName 51s ease infinite;
    animation: AnimationName 51s ease infinite;
    transition: transform 2s ease;
  }
  

  @-webkit-keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }
  @keyframes AnimationName {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
  }

父级具有使用渐变动画制作的动画背景。我只希望它在按下详细信息按钮时不会重新启动（子级更新）。按下按钮时，父级 div 的大小会发生变化。