11 replies

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

@starting-style

height: auto

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>

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

KP-C

Kevin Powell - Community•8mo ago•

11 replies

soma-foreever

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

@starting-style

@starting-style

height: auto

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>

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads