In my quest to create an interactive user interface, I am looking to add animation effects to the background of my active element within a side menu. Here is the HTML code snippet I currently have:
<ul>
<li>Dashboard</li>
<li>Content Hub</li>
<li>Users</li>
<li>Sources</li>
<li>Stories</li>
<li (click)="toggleActive()" [ngClass]="[active ? 'active' : '']">Workshop</li>
<li>Tags</li>
<li>Reports</li>
<li>Custom Categories</li>
</ul>
As of now, this menu serves as a test case for the animation effect I'd like to achieve. When Workshop is clicked, I want the background color to smoothly slide in from the left to right and when it loses its active status, the background should slide out from right to left.
Regarding CSS styling, I initially considered adding transitions but I'm wondering how to specify the direction of the movement from left to right or vice versa. Below is the relevant CSS code:
li {
width: 65%;
margin-bottom: 20px;
padding: 15px 0 15px 40px;
cursor: pointer;
background-color: transparent;
transition: 1s all ease-in-out;
&.active {
background-color: #fff;
transition: 1s all ease-in-out;
}
}