表格的 CSS 过渡

Question

我有多个表格，它们排成一行。

• 选中时，它应该展开一列(直到现在隐藏)。

• 当它被取消选中时，它应该会慢慢收缩。

我用 CSS Transition 尝试过，但是当单元格中没有文本时，收缩不起作用。

.column2 {
    background-color: #ddd;
    width: 0em;
    overflow: hidden;
    -webkit-transition: max-width 1.5s ease ;
    -moz-transition: max-width 1.5s ease ;
    transition: max-width 1.5s ease ;
    max-width: 0em;
}

table.focus .column2{
    -webkit-transition: max-width 1.5s ease ;
    -moz-transition: max-width 1.5s ease;
    transition: max-width 1.5s ease;
    width: 10em;
    max-width: 10em;
}

我做了一个fiddle带有示例代码。

另外，当我设置第一列的宽度并展开第二列时，第一列的宽度也发生了轻微的变化。

而且我无法将单元格的宽度设置为 0。是否有适用于所有浏览器的解决方案？

Answer 1

Updated fiddle .

您的中间列单元格仍然略微显示，因为它们具有正在显示的填充和边框。所以为了解决这个问题，我们设置了 padding和 border-width至 0 , 然后在 focus 时添加它们应用类:

.column2 {
  padding: 0;
  border-width: 0;
}
table.focus .column2 {
  padding: 1px;
  border-width: 1px;
}

空单元格的转换问题可以通过同时转换 width 来解决。和 max-width :

.column2 {
  transition: width 1.5s ease, max-width 1.5s ease;
}

据我所知，添加了这两件事后，第一行的单元格大小略有变化的问题似乎自行解决了。

我所做的其他更新包括删除 visibility来自 .column2 的属性(property)因为至少就该 fiddle 中的代码而言，这并不是绝对必要的，而且我还删除了 table.focus .column2 中的转换。因为过渡属性只是来自 .column2 的常规样式将在 focus 后立即启动类被删除以便将列转换回隐藏状态，因此当表具有 focus 时再次将转换属性添加到单元格类实际上是不必要的。事实上，这种风格从来没有真正做任何事情。

编辑:当第二列被隐藏时，您可能仍然会看到第一列和最后一列之间有一个小间隙。这实际上不是第二列(或其单元格)的宽度。相反，这是由 border-spacing 引起的和 border-collapse整个表格的浏览器默认属性。

至少在 Chrome 中，你有 border-collapse设置为 separate和一个 2px为 border-spacing 设置的值默认情况下。更改这些属性中的任何一个都将有效地消除列之间的间隙:

/* either */
table {
  border-collapse: collapse;
}

/* or */
table {
  border-spacing: 0px;
}

设置border-collapse: collapse会让我们看起来更干净，但我们也可以更改 border-spacing属性，而我们在它那里(即使它没有对折叠的边框做任何事情)，因为没有间距是我们真正想要的。然后我们还有一个问题，即第二列隐藏时表格中间的边框较粗，这是由双边框引起的——第一列的右边框和第三列的左边框。为了清理它，我们可以设置 0px border-width对于第一列的右边框。我们的最终解决方案如下所示:

table {
  border-spacing: 0px;
  border-collapse: collapse;
}
.column1 {
  border-right-width: 0px;
}

注意:自background-color在你的第二列是相同的颜色为你的 border-color ，当第二列展开时，您无法判断第一列缺少右边框。但是，如果您希望它们具有不同的颜色，那么当第二列可见时您会注意到缺少的右边框。要解决此问题，您需要为表格中的 focus 添加另一种样式。类:

table.focus .column1 {
  border-right-width: 1px;
}

angular.module('app', [])

.controller('FrameController', function() {
  var vm = this;
  vm.message = 'Hello world';
  var tabIndex = 0;
  
  vm.pressTab = function() {
  $('#table'+tabIndex).removeClass('focus');
  	if(tabIndex == 3) {
    	tabIndex = 0;
    } else {
    	tabIndex++;
    }

    $('#table'+tabIndex).addClass('focus');
  }

});

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

#myContainer {
  width: 700px;
  font-size: 16px;
  border: 1px solid red;
  overflow: auto;
}
table {
  border: 0.1em solid #ddd;    
  float: left;
  margin: 0.5em;
  border-spacing: 0px;
  border-collapse: collapse;
}
table.focus {
  border: 2px solid blue;
}
table td {
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
  text-align: left;
  border: 1px solid #ddd;
}
.column1 {
  border-right-width: 0px;
}
.column1, 
.column3 {
  width: 4em;
}
.column2 {
   background-color: #ddd;
   width: 0em;
   max-width: 0em;
   padding: 0;
   border-width: 0;
    -webkit-transition: max-width 1.5s ease, width 1.5s ease;
   -moz-transition: max-width 1.5s ease, width 1.5s ease;
   transition: max-width 1.5s ease, width 1.5s ease;
}
table.focus .column2{
   width: 10em;
   max-width: 10em;
   padding: 1px;
   border-width: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
  <div ng-controller="FrameController as vm">
    
<div id="myContainer">

  <table id="table1">
      <tbody>
      <tr>
          <td class="column1" style="width: 80px">Red Apple</td>
          <td class="column2"> Lorem ipsum dolor sit amet </td>
          <td class="column3">U$ 0.12</td>
      </tr>
          <tr>
          <td class="column1">Red Apple</td>
          <td class="column2"> Lorem ipsum dolor sit amet, </td>
          <td class="column3">U$ 0.12</td>
      </tr>
      </tbody>
  </table>
  
  <table id="table2">
      <tbody>
      <tr>
          <td class="column1">Red Apple</td>
          <td class="column2"></td>
          <td class="column3">U$ 0.12</td>
      </tr>
          <tr>
          <td class="column1">Red Apple</td>
          <td class="column2"></td>
          <td class="column3">U$ 0.12</td>
      </tr>
      </tbody>
  </table>
  
    <table id="table3">
      <tbody>
      <tr>
          <td class="column1">Red Apple</td>
          <td class="column2"> Lorem ipsum dolor sit amet </td>
          <td class="column3">U$ 0.12</td>
      </tr>
          <tr>
          <td class="column1">Red Apple</td>
          <td class="column2"> Lorem ipsum dolor sit amet, </td>
          <td class="column3">U$ 0.12</td>
      </tr>
      </tbody>
  </table>

</div>
<button ng-click="vm.pressTab()"> Press Tab</button>
  </div>
</div>