He estado atascado tratando de hacer que algunos divs simplemente se desvanezcan cuando se vuelven visibles en la pantalla. Tal vez me estoy perdiendo algo, pero aquí está el código.
Estoy usando los módulos React-Spring V9 y React-Visibility-Sensor.
Representación del componente padre:
{ ArrayOfText.map(text => ( <VisibilitySensor key={text}> {({ isVisible }) => ( <MyItem isVisible={isVisible} text={text} /> )} </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 porque los divs aparecerán en la pantalla con un ligero retraso después de que aparezcan. 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 se ha encontrado con este problema antes, por favor, hágame saber cómo lo resolvió. Gracias.
Descubrí el problema. Dudo que esto ayude a alguien más, pero la razón por la que no se estaba animando fue porque estaba tratando de hacer que el texto se desvaneciera y tenía los siguientes estilos aplicados:
background: -webkit-linear-gradient(60deg, #1369BF, #B07D2E, #8FD714); -webkit-background-clip: text; -webkit-text-fill-color: transparent;Esto le da al texto un color degradado, pero debería haber sabido que esto evitaría algo como la opacidad de la animación.