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使用function HideColumn() { var el = document.getElementById('columntarget'); el.className += 'hideColumn'; }，因为可见性保持宽度不起作用

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

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

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

有什么建议吗？

编辑：

@Harry片段工作正常，但是如果我们设置表格宽度会发生什么？

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

while (src == strstr(src, key)) {  /* comparison instead of assignment */

Answer 1

元素的display属性不是可转换或可动画的属性，因此对该属性值的任何更改都将立即发生，而不管通过{{设置的任何持续时间或延迟。 1}}属性。

您可以通过将类设置为transition的{{1}}子级来实现，如下面的代码段所示。

注意：

如果你没有设置div（也就是说，边框是分开的），那么td之间的边界看起来会加倍，因为即使第二个{{1}已变为border-collapse: collapse宽，td仍然存在，因此边框仍然存在。
默认情况下，td元素会在所有四个边上（至少在Chrome中）获得0px填充，这也会产生一个空格，可以通过td td使其无效1}}。

＆＃13;

1px

＆＃13;

padding: 0px

＆＃13;

td

＆＃13;

我没有完全理解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;宽度）。
通过JS将width课程应用到div并转换td和.hideColumn的宽度。

＆＃13;

td

＆＃13;

td

＆＃13;

div

＆＃13;

Answer 2

尝试使用以下代码，它可以帮助您

＆＃13;

$("#hideBtn").click(function(){
  $("#columntarget").addClass("hideColumn");
});

＆＃13;

#columntarget{
  background: yellow;
}

td {
  width: 50px;
}

.hideColumn{
    max-width:50px;
    overflow: hidden;
    background: yellow;
   -moz-animation: hide 1s ease 3.5s forwards;
   -webkit-animation: slide 1s ease 3.5s forwards;
   -o-animation: slide 1s ease 3.5s forwards;
   -ms-animation: slide 1s ease 3.5s forwards;
    animation: slide 1s ease 3.5s forwards;
}

@-webkit-keyframes slide /* Safari and Chrome */
{
from {max-width: 50px;}
to {max-width: 0px;}
}

@-moz-keyframes slide /* Safari and Chrome */
{
from {max-width: 50px;}
to {max-width: 0px;}
}
@keyframes slide
{
from {max-width: 50px;}
to {max-width: 0px;}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td style='background-color:red;'>column 1</td>
    <td id="columntarget">column 2</td>
    <td style='background-color:blue;'>column 3</td>
  </tr>
</table>

<button id="hideBtn">Hide
  </button>

＆＃13;

Answer 3

嗨，似乎有一种比@Harry答案更简单的方法。它应该添加table-layout: fixed;并设置width:0。无需将所有<td>内容包含在<div> s。

中

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: