Currently, I am in the process of learning React and have successfully created a flexbox with 6 child containers using the wrap property. Now, I am looking to add animation when the containers wrap onto a new line.
I attempted to add a transition animation property within the flexbox but unfortunately it did not work as expected.
If anyone has any guidance on how to achieve this effect, please feel free to assist me?
Below is the code snippet along with a link to a live working demo:
https://codesandbox.io/live/7fe99a09b93
Code Snippet:
import "./styles.css";
export default function App() {
return (
<div className="App">
<div className="flex_box">
<div className="child_Containers"></div>
<div className="child_Containers"></div>
<div className="child_Containers"></div>
<div className="child_Containers"></div>
<div className="child_Containers"></div>
<div className="child_Containers"></div>
</div>
</div>
);
}
CSS Styles:
.flex_box {
background-color: yellow;
display: flex;
gap: 20px;
flex-wrap: wrap;
padding: 20px;
}
.child_Containers {
height: 200px;
background-color: green;
flex: 1 1 200px;
}