Is it possible to use a CSS transition for when an element is moved on a page because another element was removed?

Question

So for example, if you have 3 boxes on the page side by side and you do "display:none" to the middle one - Is there a way to make a CSS transition for how the remaining boxes fill up the space instead of it just instantly moving? For the sake of simplicity, say my markup is this:

<div style="height:20px;width:20px;border:1px solid black;display:inline;"></div>
<div style="height:20px;width:20px;border:1px solid black;display:inline;"></div>
<div style="height:20px;width:20px;border:1px solid black;display:inline;"></div>

Essentially when I will be hiding / showing different items via javascript, but I'd like to animate how the boxes fill the open space.

Thanks in advance!

Answer 1

My original post showed how to animate the other divs to expand into the empty space.

Here's how to animate the other divs to move into the empty space:

//Vanilla JavaScript:
var cells= document.querySelectorAll('.cell');
for(var i = 0 ; i < cells.length ; i++) {
  cells[i].onclick= function() {
    this.style.width= '0%';
    this.style.border= '0px';
  }
}

//jQuery alternative:
//$('.cell').click(function(){$(this).css('width','0%')});

.cell {
  transition: width 0.5s, border 0.5s;
  background: #def;
  width: 100px;
  border: 1px solid black;
  text-align: center;
  float: left;
  overflow: hidden;
}

Click a cell to hide it:
<hr>

<div class="cell">abc</div><div class="cell">def</div>
<div class="cell">ghi</div><div class="cell">jkl</div>
<div class="cell">mno</div><div class="cell">pqr</div>
<div class="cell">stu</div><div class="cell">vwx</div>
<div class="cell">abc</div><div class="cell">def</div>
<div class="cell">ghi</div><div class="cell">jkl</div>
<div class="cell">mno</div><div class="cell">pqr</div>
<div class="cell">stu</div><div class="cell">vwx</div>
<div class="cell">abc</div><div class="cell">def</div>
<div class="cell">ghi</div><div class="cell">jkl</div>
<div class="cell">mno</div><div class="cell">pqr</div>
<div class="cell">stu</div><div class="cell">vwx</div>

---

Original Post

Instead of animating based on display: none, consider animating based on width: 0.

I've done so below. See the accepted answer at CSS table-cell equal width for how my layout works.

//Vanilla JavaScript:
var cells= document.querySelectorAll('.cell');
for(var i = 0 ; i < cells.length ; i++) {
  cells[i].onclick= function() {
    this.style.width= '0%';
  }
}

//jQuery alternative:
//$('.cell').click(function(){$(this).css('width','0%')});

.container {
  display: table;
  width: 300px;
  table-layout: fixed;
}

.cell {
  transition: width 0.5s;
  display: table-cell;
  background: #def;
  width: 2%;
  border: 1px solid black;
  overflow: hidden;
  text-align: center;
}

Click a cell to hide it:

<div class="container">
  <div class="cell">abc</div>
  <div class="cell">def</div>
  <div class="cell">ghi</div>
  <div class="cell">jkl</div>
  <div class="cell">mno</div>
  <div class="cell">pqr</div>
  <div class="cell">stu</div>
  <div class="cell">vwx</div>
</div>

Note that when only one cell is left, you can't set its width to 0, due to the way table-layout works. You'll need to program for that case if necessary.