html - 如何使用 CSS3 为 td 列可见性设置动画

Question

当一个类应用于它时，我们必须在 n 秒后(立即)通过 CSS 隐藏一个 td 列；例如以下代码段中的第 2 列:

<table>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>

我们已经尝试使用 'visibility' 和 'opacity' 它适用于 div ，但适用于 td 因为具有可见性，所以它保持一个宽度，所以它不起作用

在以下代码段中，显示会立即应用，而不是在 n 秒后应用。

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';


}

.hideColumn {
  display: none;
  transition: display 2s step-end;
}
td {
  width: 50px;
  
}

<table>
  <tr>
    <td style='background-color:red;'>column 1</td>
    <td style='background-color:yellow;' id="columntarget">column 2</td>
    <td style='background-color:blue;'>column 3</td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
  </button>

有什么建议吗？

编辑:

@Harry 代码片段工作正常，但如果我们设置表格宽度会怎样？

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';
}

.hideColumn {
  width: 0px;
  overflow: hidden;
  transition: all 2s step-end;
}
div {
  width: 50px;
}
td {
  padding: 0px;
  
}
table {
  border-collapse: collapse;
}

<table style='width:500px;' border=1>
  <tr>
    <td>
      <div style='background-color:red;'>column 1</div>
    </td>
    <td style='width:auto'>
      <div style='background-color:blue;'>column 3</div>
    </td>
    <td>
      <div style='background-color:yellow;' id="columntarget">column 2</div>
    </td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
</button>

Answer 1

元素的 display 属性不是可转换或动画属性，因此无论通过 为其设置的持续时间或延迟如何，对该属性值的任何更改都会立即发生transition 属性。

您可以通过将类设置为 td 的 div 子级来像下面的代码片段那样完成。

注意事项:

• 如果您不设置 border-collapse: collapse(即边框是分开的)，则 td 之间的边框看起来会翻倍因为即使第二个 td 变成了 0px 宽，td 仍然存在，所以边框仍然存在。
• td 元素默认在所有四个边上都有一个 1px 填充(至少在 Chrome 中)，这也会产生一个可以通过使用 取消的空间填充:td 上的 0px。

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';
}

.hideColumn {
  width: 0px;
  overflow: hidden;
  transition: all 2s step-end;
}
div {
  width: 50px;
}
td {
  padding: 0px;
}
table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td>
      <div style='background-color:red;'>column 1</div>
    </td>
    <td>
      <div style='background-color:yellow;' id="columntarget">column 2</div>
    </td>
    <td>
      <div style='background-color:blue;'>column 3</div>
    </td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
</button>

---

当 table 被分配了 width 时，我没有完全理解问题是什么，因为 td 在延迟后仍然隐藏。如果您指的是剩余的两列展开以占据整个宽度，则可以通过执行以下操作来解决:

• 将 table-layout: fixed; 设置为表格。
• 同时向 td 添加一个 width(等于 div 宽度)。
• 通过JS将.hideColumn类应用到td上，同时改变td和div的宽度>.

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';
}

.hideColumn > div {
  width: 0px;
  overflow: hidden;
  transition: all 2s step-end;
}
td, div {
  width: 50px;
  padding: 0px;
}
.hideColumn {
  width: 0px;
  transition: all 2s step-end;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
}

<table style="width:500px;" border=1>
  <tr>
    <td>
      <div style='background-color:red;'>column 1</div>
    </td>
    <td style='width:auto'>
      <div style='background-color:blue;'>column 3</div>
    </td>
    <td id="columntarget">
      <div style='background-color:yellow;'>column 2</div>
    </td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
</button>