KPC
Kevin Powell - Community•4w ago
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>
<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>
7 Replies
curiousmissfox
curiousmissfox•4w ago
This really should be a list <ul> or <ol> then styled as you want it to look. I dont use tailwind but try adjusting duration duration to something like 800ms , the default might be too quick
soma-foreever
soma-foreeverOP•4w ago
the default might be too quick
Wait so this is all that's needed to animate lists? I'm asking cause this code was just something I wrote to vaguly describe the structre of list I have. I didn't exptect it to actually work.
I dont use tailwind but
My question is more generally talking about CSS so it's fine. you can ignore the tailwind part. yep. doesn't work 
.container {
  display: flex;
  gap: 15px;
  border: 1px blue solid;
  transition: all 40s;
  background-color: blue;
}

.item {
  background-color: red;
}
.container {
  display: flex;
  gap: 15px;
  border: 1px blue solid;
  transition: all 40s;
  background-color: blue;
}

.item {
  background-color: red;
}
<div className="container">
    <span className="item"> foo</span>
    <span className="item"> foo</span>
    <span className="item"> foo</span>
    <span className="item"> foo</span>
    <span className="item"> foo</span>
</div>
<div className="container">
    <span className="item"> foo</span>
    <span className="item"> foo</span>
    <span className="item"> foo</span>
    <span className="item"> foo</span>
    <span className="item"> foo</span>
</div>
soma-foreever
soma-foreeverOP•4w ago
Chris Bolson
Chris Bolson•4w ago
Assuming that you are removing the element with JS you may as well do the transition with JS too. Also, to be able to transition the width of a flex element you need to have a value defined initially so that it can transition to 0 (in your case)
Kingpin
Kingpin•4w ago
You could also first add a class that makes the height 0 and opacity 0 and then remove it.
soma-foreever
soma-foreeverOP•3w ago
Also, to be able to transition the width of a flex element you need to have a value defined initially so that it can transition to 0 (in your case)
I've put width: fit-content; in the container so that should act as the 'initial' value. now when the items are removed with JS the computed value of container tends towards 0. Browser should animate that. Note: I'm using interpolate-size: allow-keywords; on root so fit-content should animate. At least that's what I thought yesterday but I found out that that's not how CSS animations work. They animate from one property to another set in CSS like width:auto -> width:100px and does not animate from a property to a computed value in browser yea but that's a bit roundabout way of doing it. I'll have to add that class, listen for animation to end and then remove element from DOM. I was hopping CSS has a more elegent solution for handling that. I noticed that @starting-style solves a lot of hurdles from the past in animating on entry. I thought maybe they got something from "exit" styles as well.
Kingpin
Kingpin•3w ago
I think you will have to work with some delay tho

Did you find this page helpful?