React Spring utiliza el gancho useSpring para cambiar entre el estado inicial y el estado final sin animación.

He estado atrapado intentando hacer que algunos divs simplemente se desvanezcan cuando se vuelven visibles en la pantalla. Tal vez me falte algo, pero aquí está el código.

Estoy usando los módulos React-Spring V9 y React-Visibility-Sensor.

Renderizado del componente principal:

{
    ArrayOfText.map(text => (
        <visibilitysensor key="{text}">
            {({ isVisible }) => (
                <myitem isvisible="{isVisible}" text="{text}"></myitem>
            )}
        </visibilitysensor>
    ))
}

Componente hijo:

export default function MyItem({ text, isVisible }) {

    const animatedStyle = useSpring({
        config: { ...config.gentle },
        to: {
            opacity: isVisible ? 1 : 0
        }
    });

    return (
        <animated.div style="{animatedStyle}" classname='large-header-text'>
            {text}
        </animated.div>
    );
}

Esto funciona en el sentido de que los divs aparecerán en la pantalla con un ligero retraso después de que se vuelven visibles. El problema que tengo es que no hay animación. Es solo opacidad 0, luego espera ~1 segundo, luego instantáneamente opacidad: 1.

Si alguien ha tenido este problema antes, ¡por favor, hágamelo saber cómo lo solucionó! Gracias.