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!

I don't need them to get bigger. Its just if you remove an element, then there is blank space for a split second before the other element fills that space. I'd like to do a nice transition for THAT — Nick, Dec 21 '14 at 00:17
CSS does have an [animation-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) property, but from what I understand, it begins the count when the DOM is loaded, not when you have a click event, like removing a box. For that, your best bet would be either jQuery or JavaScript. — Brian, Dec 21 '14 at 00:37
You probably meant inline-block instead of inline. Inline elements don't have a set width. — BoltClock, Dec 21 '14 at 04:33
Also, you will not be able to transition by changing the display property, since you can't really animate between two display types (not even when transitioning to none). — BoltClock, Dec 21 '14 at 04:38

score 1 · Answer 1 · edited May 23 '17 at 11:49

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.

That a really intriguing way of looking at that! Unfortunately I will eventually have more than 1 row of boxes and all of the boxes need to shift instead of grow. (They do "shift" now but that is what I'm looking to animate. Thanks though! — Nick, Dec 21 '14 at 16:30

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

1 Answers1

Original Post