Come animare la visibilità della colonna td con CSS3

Question

Dobbiamo nascondere una colonna td dopo n secondi (immediatamente) tramite CSS, quando viene applicata una classe; per esempio la colonna 2 in seguente frammento:

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

Abbiamo già provato a giocare con 'visibility' e 'opacity' funziona con div, ma con td dal momento che la visibilità è mantenere una larghezza non funziona

Nello snippet seguente, il display viene applicato immediatamente anziché dopo n secondi.

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>

Qualsiasi suggerimento?

EDIT:

Il frammento @Harry funziona bene, ma che cosa succede se abbiamo impostato la larghezza della tabella?

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

La display struttura di un elemento non è un transitionable o proprietà animatable e così qualsiasi modifica del valore della proprietà avverrà immediatamente indipendentemente da qualsiasi durata o ritardo impostato ad esso tramite la transition proprietà.

È possibile farlo come nel frammento di seguito impostando la classe su unfiglio di td.

Note:

• Se non si imposta border-collapse: collapse (vale a dire, i confini sono separati) allora il confine tra il td sarà simile si è raddoppiata perché, anche se il secondo ha td diventa 0px largo, lo td è ancora lì e quindi il bordo sarà ancora presente.
• Gli elementi td di default ottengono una spaziatura 1px su tutti e quattro i lati (almeno in Chrome) e questo produce anche uno spazio che può essere annullato utilizzando padding: 0px su td.

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>

---

non ho capito pienamente che cosa è il problema quando table è stato assegnato un width perché il td nasconde ancora dopo un ritardo. Se lei si riferisce ai due restanti colonne espansione di occupare l'intera larghezza allora che possono essere affrontate nel modo seguente:

• Impostare al tavolo.
• Aggiungere un width (uguale alla larghezza div) allo td anche.
• Applicare la classe .hideColumn a td tramite JS e passare la larghezza sia di td sia di 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

provate con questo sotto il codice può aiutare a

$("#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

Hi sembra che ci sia un modo più semplice di quanto la risposta @Harry. È sufficiente aggiungere e impostare width:0. Non è necessario avvolgere tutti i contenuti di <td> in <div> s.

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>