响应防止css动画重新启动每个状态更改

Question

我有两个子组件，一个图片库和一个隐藏组件，它将显示完整大小的库的点击图像。

    const [selectedIndex, setSelectedtIndex] = useState(0);
    const [galleryVisible, setGalleryVisible] = useState(false);

    const FirstComponent = () => {
        return (
           <div className={'gallery-container'}>
               <div class='img fade-1' onClick={() => handleClick(1)}>Image 1</div>
               <div class='img fade-2' onClick={() => handleClick(2)}>Image 2</div>
               <div class='img fade-3' onClick={() => handleClick(3)}>Image 3</div>
               [...]
           </div>
        )
    }

    const handleClick = (index) => {
        setSelectedtIndex(index)
        setGalleryVisible(true)
    }

    const SecondComponent = ({ index }) => {
        return (
            <div className={`selected-img`}>Selected : {index} (But the fading animation shouldn't restart è_é)</div>
        )
    }

    return (
        <>
            <FirstComponent/>
            {galleryVisible && 
                <SecondComponent index={selectedIndex} />
            }
        </>
    )

问题是，我在第一个组件上也有一个淡入动画，每次我点击一个图像来显示第二个组件时，动画就会因为对状态变化的重新反应而重置。

    &.fade-1 {
      animation-delay: 0s
    }
    &.fade-2 {
      animation-delay: 0.5s
    }
     &.fade-3 {
      animation-delay: 1s
    }

我不知道我怎么能只改变第二个组件，当状态从点击第一个.我试着和useMemo玩，但没能让它起作用。

下面是一个代码复制问题：https://codepen.io/disgallion/pen/zYjqPBE

Answer 1

将第一个组件移出App并将handleClick传递给它的支持：

  const FirstComponent = ({handleClick}) => {
    return (
      <div className={'gallery-container'}>
        <div class='img fade-1' onClick={() => handleClick(1)}>1</div>
        <div class='img fade-2' onClick={() => handleClick(2)}>2</div>
        <div class='img fade-3' onClick={() => handleClick(3)}>3</div>
      </div>
    )
  }

const App = () => {
  const [selectedIndex, setSelectedtIndex] = useState(0);
  const [galleryVisible, setGalleryVisible] = useState(false);

  const handleClick = (index) => {
    console.log('click')
    setSelectedtIndex(index)
    setGalleryVisible(true)
  }


  
  const SecondComponent = ({ index }) => {
    return (
      <div className={`selected-img`}>Selected : {index} (But the fading animation shouldn't restart è_é)</div>
    )
  }
  
  return (
    <>
      Click on an image to open the fullsize gallery:
      <FirstComponent handleClick={handleClick} />
      {galleryVisible && 
        <SecondComponent index={selectedIndex} />
      }
    </>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))

现在，App的状态更改将不会在FirstComponent中触发重呈现。