I want to add the sliding animation to the elements when the user hovers over the box.
Initially, a burger icon (black color) is displayed. As the user hovers over the box, I want to add a sliding animation from right to left and the color should change to green. And as the user moves out of the div, the animation should slide from left to right and the element should go back to its default state.
How can I achieve this using CSS?
Code Sandbox: https://codesandbox.io/s/focused-burnell-k5om1v
App.jsx
import React from "react";
import "./styles.css";
import { ReactComponent as Burger } from "./burger.svg";
import { ReactComponent as Fries } from "./fries.svg";
export default function App() {
const [isShown, setIsShown] = React.useState(false);
return (
<div
className="container"
onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}
>
{isShown ? (
<div className="box">
<Burger fill="green" width="100px" height="100px" />
<div> Menu </div>
<Fries width="100px" height="100px" />
</div>
) : (
<div className="box">
<Burger width="100px" height="100px" />
</div>
)}
</div>
);
}
style.css
.container {
border: 2px solid black;
width: 500px;
height: 120px;
}
.box {
display: flex;
justify-content: flex-end;
align-items: center;
}
There are a few things wrong with the App.js and styles.css.
If you simply want to show or hide elements on hover, it would be much better to do that with CSS (opacity: 0 and transition to opacity: 1 on hover) as this would help introduce fewer bugs and issues with timing while the component might still be rendering for example.
Note that doing this through ReactJS would just show the SVG icon element immediately, without a transition.
To slide the hidden icon element in, we would then use the positioning properties of the element at different states (normal and hover) with a transition effect applied.
So, I have modified your App.js to:
App.js:
export default function App() {
return (
<div className="container">
<div className="box">
<div className="first-icon-box">
<Burger fill="green" width="100px" height="100px" />
</div>
<div> Menu </div>
<div class="second-icon-box">
<Fries width="100px" height="100px" />
</div>
</div>
</div>
);
}
I've wrapped each SVG element in a <div> to make it easier to target them in the CSS.
styles.css:
We'll use absolute positioning, and for this to work, we need to set
position: relative on .container.
Next, the transition property needs to be set in the normal state of the icon element alone, not in the normal and hover states.
The element will start from the right-most location of .container so right: 0px. Hidden initially, so opacity: 0 and transition set on all properties. Those values are then changed on .box:hover.
.container {
position: relative;
...
}
.box {
display: flex;
justify-content: flex-end;
align-items: center;
cursor: pointer;
}
.first-icon-box {
position: absolute;
right: 0px;
opacity: 0;
transition: all 0.55s ease-in-out;
}
.box:hover .first-icon-box {
right: 140px;
opacity: 1;
}
You may also view this answer in a sandbox here: Sliding CSS Animation on hover in React element.