2 Attachment(s)
animating removal of list item
Hello,
I have an unordered list that looks like this:
Attachment 6216
The html looks like this:
Code:
<ul class="categoryList">
<li _ngconntent-c5 style="background-color: rgb(185, 74, 156);">ROUND</li>
<li _ngconntent-c5 style="background-color: rgb(143, 143, 198);">MEC</li>
...
</ul>
The CSS looks like this:
Code:
li
{
display: inline;
color: white;
font-size: 12pt;
padding: 5px;
margin-right: 5px;
border-radius: 10px;
height: 30px;
opacity: 1.0;
}
.categoryList
{
margin-top: 10px;
padding-left: 0;
}
I have a click event on each list item that causes the item to be removed from the list and placed elsewhere on the page. For example, if you click "MEC" then list will look like this:
Attachment 6217
What I'm wondering is how would one do a CSS animation? So instead of the list all of a sudden not having "MEC" anymore, "MEC" would disappear and all the items to the right will move to the left, filling the gap left behind by "MEC".
I'm not sure how such a transition would be done on a list. Does anyone have any suggestions?