Soy nuevo en reaccionar y estoy tratando de deslizarme hacia abajo en mi elemento div usando react-spring. Sin embargo, el efecto de deslizamiento hacia abajo no funciona. Vi esto en un tutorial e intenté implementarlo, pero no funciona.
Aquí está mi código:
<Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}> {props => ( <div style={props}> <div style={{ display: cost ? 'block' : 'none' }}> <Card className="calculation shadow"> <CardBody> <div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20 }}></div> <Row style={{ float: 'right', marginBottom: '1rem' }}> <span style={{ float: 'right' }}> <FontAwesomeIcon icon={faClipboardList} onClick={this.handler} /> </span> </Row> <div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20 }}></div> </CardBody> </Card> </div> </div> )} </Spring>¿Cómo hago que funcione para que el componente div se deslice hacia abajo al hacer clic en un botón? Por favor ayuda
No está pasando los estilos animated.div a un archivo animation.div. Lo que significa que los accesorios del resorte no animarán su componente.
Además, dado que activa la animación con un clic. Establecería los valores animados: opacidad y marginTop como variables de estado. Luego, en el controlador onClick , puede actualizar el estado desencadenando un cambio en la animación.
Vea los documentos de Spring aquí
Y para más información, aquí hay un codesandbox
Encontré la solución, todo está bien, no se requiere div animado, solo tuve que cambiar la versión de react-spring a npm i react-spring@8.0.20 y funciona