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

概述当一个类应用于它时,我们必须在n秒(立即)之后通过CSS隐藏一个td列;例如,以下代码段中的第2列： <table> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr></table> 我们已经尝试使用“可见性”和“不透明度”它与div一起使用,但是使用td因为具有可见性它保持宽度它不起 当一个类应用于它时,我们必须在n秒(立即)之后通过CSS隐藏一个td列;例如,以下代码段中的第2列：

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

我们已经尝试使用“可见性”和“不透明度”它与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>

解决方法 元素的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>

我没有完全理解为表分配宽度时的问题是什么,因为td在延迟后仍然隐藏.如果您指的是其余两列扩展占据整个宽度,那么可以通过执行以下 *** 作来解决：

>设置表格布局：固定;到桌子.
>也将宽度(等于div宽度)添加到td.
>通过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  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>

总结

以上是内存溢出为你收集整理的html – 如何使用CSS3为td列可见性设置动画全部内容，希望文章能够帮你解决html – 如何使用CSS3为td列可见性设置动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。