CSS3

Question

के साथ टीडी कॉलम दृश्यता को एनिमेट करने के लिए कैसे करें हमें सीएसएस के माध्यम से कॉलम को एन सेकंड के बाद (तत्काल) सीएसएस के माध्यम से छिपाना होगा, जब कोई कक्षा लागू होती है; उदाहरण निम्नलिखित स्निपेट में स्तंभ 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'; 
 

 

 
}

.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 संपत्ति एक transitionable या animatable संपत्ति और इतना है कि संपत्ति के मूल्य में कोई परिवर्तन तुरंत किसी भी अवधि या विलंब कि के माध्यम से इसे करने के लिए सेट कर दिया जाता की परवाह किए बिना क्या होगा नहीं है transition संपत्ति।

आप कक्षा को divtd के बच्चे को सेट करके निम्न स्निपेट में ऐसा कर सकते हैं।

नोट्स:

• आप border-collapse: collapse निर्धारित नहीं करते हैं (अर्थात, सीमाओं अलग कर रहे हैं) तो td के बीच में सीमा दिखेगा क्योंकि भले ही 2 td है जैसे कि यह दोगुनी हो गई है 0px चौड़ा बनें, td अभी भी वहां है और इसलिए सीमा अभी भी मौजूद होगी।
• td तत्वों डिफ़ॉल्ट रूप से (क्रोम में कम से कम) सभी चार पक्षों पर एक 1px गद्दी मिलता है और यह भी एक अंतरिक्ष जो 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 पर भी जोड़ें।
• .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 सेट करने के लिए तैयार है। <div> एस में सभी <td> सामग्री को लपेटने की आवश्यकता नहीं है।

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>