Kevin Powell - CommunityKP-C
Kevin Powell - Community•6mo ago•
11 replies
soma-foreever

I want to animate the list if one item is removed. Is it trivial in modern CSS?

I have 10 items and say I remove the 3rd one. I want the rest to move into place smoothly and not just teleport with no animation. There are many ways of doing it but I was wondering if any of the modern CSS features has made this problem easier to solve. Like the 
@starting-style
 or 
height: auto
 maybe?

What's the simplest way of doing it?

<div className="flex gap-4 border bg-white transition-all">
    <span className=""> example </span>
    <span className=""> example </span>
    <span className=""> example </span> <- remove this
    <span className=""> example </span>
    <span className=""> example </span>
</div>
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy