是否可以在页面上移动元素时使用CSS转换，因为删除了另一个元素？

Question

例如，如果你并排在页面上有3个方框，你可以＆＃34;显示：无＆＃34;中间一个 - 有没有办法进行CSS过渡，以便剩余的盒子如何填满空间而不是立即移动？为简单起见，请说我的标记是这样的：

<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>

基本上，当我通过javascript隐藏/显示不同的项目时，我想设置框如何填充开放空间。

提前致谢！

Answer 1

我的原始帖子展示了如何动画其他div以展开进入空白区域。

以下是如何将其他div动画为移动进入空白区域：

//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>

---

原帖

不考虑基于display: none的动画，而是考虑基于width: 0制作动画。

我在下面这样做了。请参阅CSS table-cell equal width上接受的答案，了解我的布局如何运作。

//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>

请注意，当只剩下一个单元格时，由于table-layout的工作方式，无法将其宽度设置为0。如有必要，您需要为该案例编程。