I have this animated div to load when the page has rendered the UI. But when I try to add other div's below it gets stuck at the back.?
I’m developing a web page using React js. I have used [email protected] npm package to animate a div on loading the web page. I wanna append some more div’s below my animated container. But the content of the new div is being overflowed by the animated div. What should I do in order to accomplish my layout? I know that the overflow property is the culprit. I tried changing it but couldn’t arrive at what I intended to. Can someone give me a solution?
My index.js
import React, { Component, Fragment } from 'react' import ReactDOM from 'react-dom' import { Transition, animated } from 'react-spring' import './styles.css' const Sub = () => ( <div style={{ backgroundColor: 'pink', height: 100 }}>Hey</div> ) class App extends Component { componentDidMount() { this.setState({ toggle: true }) } state = { toggle: false } render() { return ( <Fragment> <Transition native from={{ opacity: 0, height: 0 }} enter={{ opacity: 1, height: 'auto' }} leave={{ opacity: 0 }}> {this.state.toggle && (style => ( <animated.div className="box" style={style}> <Sub /> </animated.div> ))} </Transition> <div> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> <h1>7</h1> </div> </Fragment> ) } } const rootElement = document.getElementById('root') ReactDOM.render(<App />, rootElement) THIS is the screenshot of my problem . As you can see, I have 7 h1 tags enclosed in another div below the animated div. And the content is being overflowed.Help me refactor this code to move all the contents of the succeeding div to their appropriate places.
My css
* { box-sizing: border-box; } html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; } #root { font-family: sans-serif; text-align: center; } .box { overflow: hidden; position: absolute; width: 100%; background: orange; } Thanks in advance.
NOTE : I’ve not used the latest version of react-spring. The version used is 5.5.4.
