animating removal of list item

[gib65]

Hello,

I have an unordered list that looks like this:

6216

The html looks like this:



<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:



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:

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?

[jscheuer1]

You could try a css transition on the width of the ul. If you provide a link to the page, I'll play around with that and see if anything looks promising. Something like:



.categoryList
{
margin-top: 10px;
padding-left: 0;
transition: width 2s;
}

Might also need display: inline-block and/or perhaps other thing(s) to make it work.

[gib65]

You could try a css transition on the width of the ul. If you provide a link to the page, I'll play around with that and see if anything looks promising. Something like:



.categoryList
{
margin-top: 10px;
padding-left: 0;
transition: width 2s;
}

Might also need display: inline-block and/or perhaps other thing(s) to make it work.

Thanks jscheuer1, but unfortunately it's not working for me. Width transitions don't seem to work on lists or list items.

[jscheuer1]

Well, as I said, "Might also need display: inline-block and/or perhaps other thing(s) to make it work."

That's why I asked for a link to your page. With that I can try out various scenarios, and perhaps find one that works, and/or determine if there's javascript code that can assist/perform the desired effect.

If you want more help, please post a link to the page on your site that demonstrates this issue.