带表的CSS过渡 [英] CSS Transition with Tables

问题描述

我在一行中有多个表。

• 选择一个时，

取消选择后，它应该缓慢缩小。

When it is deselected, it should shrink slowly.

我尝试了CSS转换，但是当单元格中没有文本时，缩小不会

I tried it with an CSS Transition, but when there is no text in the cell, the shrinking doesn't work.

.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;
}

我做了小提琴带有示例代码。

另一件事，当我设置第一列的宽度和展开第二列，第一列的宽度也略有变化。

Another thing, when I set the width for the first column and expand the second column, the width of the first column also changed slightly.

我无法将单元格的宽度设置为0。有没有可行的解决方案

And I can't set the width of a cell to 0. Is there a solution which work with all browsers?

推荐答案

更新了小提琴。

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

Your middle column cells were still showing slightly because they had padding and borders that were being displayed. So to fix that, we set the padding and border-width to 0, then add them when the focus class is applied:

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

空单元格的转换问题可以通过同时转换宽度和最大宽度：

The transition problem for empty cells can be solved by transitioning both the width and max-width:

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

添加了两点，第一行单元格的大小略有变化据我所知，它似乎可以自行修复。

Those two things added in, the issue of the first row's cells changing sizes slightly seems to fix itself, so far as I can tell.

我进行的其他更新包括从中删除可见性属性 .column2 ，因为至少就该小提琴中的代码而言，它并不是严格必需的，而且我还从表中删除了转换。 focus .column2 因为 .column2 常规样式的过渡属性将在 focus 类已删除，以便将列转换回隐藏状态，因此当表具有 focus 类时，再次将transition属性添加到单元格中实际上没有必要。实际上，这种样式实际上从未做过任何事情。

Other updates I made included removing the visibility property from .column2 because it wasn't strictly necessary at least as far as the code in that fiddle was concerned, and I also removed the transitions from table.focus .column2 because the transition property from just the regular styles for .column2 will kick in as soon as the focus class is removed in order to transition the column back to hidden, so adding the transition property to the cells again for when the table has the focus class is actually unnecessary. In fact, that style was never actually doing anything.

编辑：当第二列是隐藏的。这实际上不是第二列（或其单元格）上的宽度。相反，这是由 border-spacing 和 border-collapse 属性引起的，这些属性是整个表的浏览器默认值。

You may still see a small gap between the first and last column when the second column is hidden. This is not actually a width on the second column (or its cells). Rather, this is caused by the border-spacing and border-collapse properties that are browser defaults for the whole table.

至少在Chrome中，您将边界崩溃设置为单独，默认情况下为边框间距设置了 2px 值。更改以下任一属性将有效消除列之间的间隙：

At least in Chrome, you have border-collapse set to separate and a 2px value set for border-spacing by default. Changing either of these properties will effectively remove the gap between the columns:

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

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

设置边界崩溃：崩溃将使我们看起来更整洁，但我们也可以在使用它的同时更改 border-spacing 属性（即使它没有任何作用）边框塌陷），因为我们真正追求的是没有间距。然后，剩下的问题是表格中间的边框较粗，而第二栏被隐藏，这是由双边框引起的-第一栏的右边框和第三栏的左边框。为了解决这个问题，我们可以在第一列的右边框设置 0px border-width 。我们最终的解决方案如下所示：

Setting border-collapse: collapse will give us a cleaner look, but we may as well also change the border-spacing property while we're at it (even if it doesn't do anything with collapsed borders), since no spacing is what we're really after. Then we have one remaining problem of a thicker border in the middle of the table while the second column is hidden, which is caused by a double border – the right border of the first column, and the left border of the third column. To clean that up, we can set a 0px border-width for the right border on the first column. Our final solution looks like this:

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

注意：由于 background-color 与 border-color 的颜色相同，您无法判断出右边框缺失了第二列展开时的第一列。但是，如果您希望它们具有不同的颜色，那么当第二列可见时，您将可以注意到缺少的右边框。要解决此问题，您可以在表具有 focus 类时添加另一种样式：

Note: Since the background-color on your second column is the same color as your border-color, you can't tell that the right border is missing from the first column when the second column expands. However, if you wanted them to have different colors, then you'd be able to notice the missing right border when the second column is visible. To fix that, you'd add one more style for when your table has the focus class:

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>

这篇关于带表的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！