Can a CSS transition be used for when an element moves on the page because another element has been removed?
So, for example, if you have 3 fields on the page and you do "display: none" to the middle. Is there a way to make the CSS transition for the way the rest of the fields fill the space instead of it just moving instantly? For simplicity, let's say my markup is:
<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 hide / show different elements via javascript, but I would like to spice up how the fields fill the open space.
Thanks in advance!
source to share
My original post showed how to animate other divs to expand them into empty space.
Here's how to animate other divs to move to 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 animation based, display: none
consider animation based width: 0
.
I did it below. See the accepted answer on equal table width CSS table 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 there is only one cell left, you cannot set its width to 0 because of the way it works table-layout
. You need to program this case if necessary.
source to share