如何使用CSS3動畫td列的可見性

Question

當一個類應用於它時，我們必須通過CSS在n秒後隱藏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上使用padding: 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的延遲後，仍然隱藏。如果您指的是其餘兩列擴展佔據全寬，則可以通過執行以下操作來解決：

• 將設置爲表格。
• 也加上一個width（等於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 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>

Answer 2

與此下面的代碼嘗試它可以幫助你

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

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

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

Answer 3

嗨似乎還有比@Harry答案更簡單的方法。 它足以添加並設置width:0。無需將<td>內容全部包含在<div>中。

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

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

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