4

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!

Improve this question
6
  • So they both animate to be width: 30px? Commented Dec 20, 2014 at 23:45
  • I doubt you can do it without JavaScript. Commented Dec 21, 2014 at 0:08
  • 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 Commented Dec 21, 2014 at 0:17
  • CSS does have an 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. Commented Dec 21, 2014 at 0:37
  • You probably meant inline-block instead of inline. Inline elements don't have a set width. Commented Dec 21, 2014 at 4:33

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.