How to show element with transition duration in html table

Question

I am working with HTML tables and need to show new rows by applying transition in a certain way.

My desired result is to show new rows with transition duration.

But I am having trouble getting this result using HTML & CSS & JS.

When I click default displayed element,it seems not to be applied transition duration to show new element.

So far, I have the below code, but the result is not exactly right.

How can I modify my code to get the desired result?

Thanks

$("td").click(function(){
  $("tr .hide").parent().addClass("show");
  });

table {
border-collapse:collapse;}

td {
border:solid black 1px;
padding:5px;
cursor:pointer;
transition-duration:1s;}

tr:nth-child(2):not([class]){
display:none ;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="hide">1</td>
    <td class="hide">2</td>
    <td class="hide">3</td>
  </tr>
</table>

How to show element with transition duration in html table

0 Answers0