如何在由于状态更改而更改的反应元素上触发 CSS 动画？答案

【问题标题】：How do I trigger CSS animation on react element that has changed due to state change?如何在由于状态更改而更改的反应元素上触发 CSS 动画？
【发布时间】：2022-01-24 08:04:59
【问题描述】：

我正在尝试重现这种效果：https://imgur.com/a/4iu2ScT 目前我正在渲染一个基于状态的“src”。像这样

import React from "react";
import styled from "styled-components";
import home_food from "../images/home/home_aji_de_gallina.jpg"
import food from "../images/menu/entry/causa.jpeg"

import { useState } from "react";

const TestBoks = styled.div`
    background-color:red;
    width: 30px;
    height: 30px;
    opacity: ${props => props.opacity || 0.6};
    transition: ease-in-out;
`;
const TestContainer = styled.div`

    display: flex;
    width: 100%;
    justify-content: space-around;
`;
const WholePage = styled.div`   

    height: 100vh;
    width: 100%;

    img{
        width: 100px;
        transition: ease-in;
    }
`

const pictures = [home_food,food]

const Test = () => {

    const [Picture, setPicture] = useState(pictures[0])

    function setNewPicture(index_number){
        setPicture(pictures[index_number])
        
    }

    return (

        <WholePage> 

        <TestContainer>
            <TestBoks key={Picture[0]} onMouseEnter={() => setNewPicture(0)}/>
            <TestBoks key={Picture[1]} onMouseEnter={() => setNewPicture(1)}/>
        </TestContainer>  

        <img src={Picture} alt="ononon" />
           
        </WholePage>
    );
};

export default Test;

它最终看起来像这样：https://imgur.com/a/bTJLTAC

但是，它忽略了我在 styled.div 中描述的动画

所以我的问题是，如何在由状态变化引起的渲染上触发 css 动画？

如果有更好的方法来实现Imgur中链接的效果，也请分享一下

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您应该使用 useEffect 来监听状态变化。见：https://reactjs.org/docs/hooks-effect.html

另外，别忘了导入：import { useEffect } from 'react';

const Test = () => {

  const [Picture, setPicture] = useState(pictures[0])
  const [newPicture, setNewPicture] = useState(0)

  useEffect(() => {
    setPicture(pictures[newPicture])
  }, [newPicture]);

  return (

      <WholePage> 

      <TestContainer>
          <TestBoks key={Picture[0]} onMouseEnter={() => setNewPicture(0)}/>
          <TestBoks key={Picture[1]} onMouseEnter={() => setNewPicture(1)}/>
      </TestContainer>  

      <img src={Picture} alt="ononon" />
         
      </WholePage>
  );
};

【讨论】：