javascript - 使用 CSS transition 和 class toggle 显示/隐藏表格行

Question

我有许多包含很多行的表格。我想最初只显示前三个表行。当用户单击“显示/隐藏”链接时，所有隐藏的行都将被切换。到目前为止，我已经使用 CSS3 和 JavaScript ( see Fiddle ) 实现了这一目标。

CSS(默认只显示三行):

.hide tr:nth-child(n+4) {
  display:none;
}

JavaScript(在类上方切换以显示所有行):

function ShowHide() {
  var tables = document.getElementsByClassName('foo');
  for(i=0; i<tables.length; i++) {
    tables[i].classList.toggle("hide");  
  }
}

是否可以使用 CSS3 的 transition 功能使行缓慢显示，而不是立即显示？例如，淡入/淡出超过 2 秒？

我知道这可以在 JQuery 中轻松完成，但我正在寻找纯 CSS 解决方案。

Answer 1

做到这一点的最佳方法确实是调整高度和不透明度。但是你不能在表格元素上设置高度 (tr/td)

所以这是一个关于如何只使用 CSS 的例子

#expand {
 /* hide the checkbox */
 display: none
}

label {
  /* style as a button (you can't use button inside label with for attribute) */
  padding: 2px 5px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 5px;
  font-size: .7rem;
  cursor: pointer;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table tr:nth-child(n+4)>td {
  padding: 0;
}

table tr:nth-child(n+4)>td>div {
  opacity: 0;
  max-height: 0;
  transition: all 250ms ease-in;
}

#expand:checked + table tr:nth-child(n+4)>td {
  padding: 1px;
  /* default */
}

#expand:checked + table tr:nth-child(n+4)>td>div {
  opacity: 1;
  /* try to use something just slightly above the true height */
  max-height: 20px;
  overflow: hidden;
  transition-timing-function: ease-out;
}

<input type="checkbox" id="expand"/>
<table id="table">
  <tbody>
    <tr>
      <td>
        <div>Row 1</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 2</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 3</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 4</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 5</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 6</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 7</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 8</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 9</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Row 10</div>
      </td>
    </tr>
  </tbody>
</table>
<br/>
<label for="expand">Toggle</label>

---

编辑

隐藏列的类似技巧:

#expand {
  /* hide the checkbox */
  display: none
}

label {
  /* style as a button (you can't use button inside label with for attribute) */
  padding: 2px 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 5px;
  font-size: .7rem;
  cursor: pointer;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

tr>*:nth-child(n+2)>div {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 250ms ease-in;
}

#expand:checked+table tr>*:nth-child(n+2)>div {
  max-width: 100%;
  opacity: 1;
  transition-timing-function: ease-out;
}

<input type="checkbox" id="expand" />
<table id="table">
  <thead>
    <tr>
      <th>Column1</th>
      <th>
        <div>Column2</div>
      </th>
      <th>
        <div>Column3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>Cell 1-1</div>
      </td>
      <td>
        <div>Cell 1-2</div>
      </td>
      <td>
        <div>Cell 1-3</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Cell 2-1</div>
      </td>
      <td>
        <div>Cell 2-2</div>
      </td>
      <td>
        <div>Cell 2-3</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Cell 3-1</div>
      </td>
      <td>
        <div>Cell 3-2</div>
      </td>
      <td>
        <div>Cell 3-3</div>
      </td>
    </tr>
  </tbody>
</table>
<br/>
<label for="expand">Toggle</label>