Estoy tratando de recrear este efecto: https://imgur.com/a/4iu2ScT Actualmente estoy renderizando con el "src" basado en el estado. Como esto
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;Y termina luciendo así: https://imgur.com/a/bTJLTAC
Sin embargo, ignora la animación que describí en styled.div
Entonces mi pregunta es, ¿cómo activo una animación css en un renderizado causado por un cambio de estado?
Si hay una mejor manera de lograr el efecto vinculado en Imgur, compártala también
Debe usar useEffect para escuchar los cambios de estado. ver: https://reactjs.org/docs/hooks-effect.html
Además, no olvides importar: 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> ); };