How to add transition or fade-in effect to dynamically added field-CodePudding

I have input section with add/delete button, that adds extra input fields. I am trying to get input field appear with a transition effect instead of popping up instantly.

I tried to use transition but it didn't helped. Is it possible to do it via pure CSS?

Code

var i = 1;

$('#add_patient').click(function() {
  i  ;
  $('#tbl_patient').append('<tr id="row'   i   '" >\
  <td>\
     <input type="text" id="patient'   i   '" name="patient" placeholder="Patient Name" required>\
  </td>\
  <td>\
     <button  type="button" name="remove" id="'   i   '">--</button>\
  </td>\
</tr>');
});

$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
  $('#row'   button_id   '').remove();
});

td {
  transition: 0.5s ease 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_patient">
  <thead>
    <tr>
      <th colspan="2" >Patient</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" id="patient" name="patient" placeholder="Patient Name">
      </td>
      <td>
        <button type="button" name="add_patient" id="add_patient"> </button>
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

I don't use jQuery so had to use a little vanilla Javascript but essentially the transition is applied to the table-row and uses opacity from 0 - 1 to create the fade-in effect.

var i = 1;

$('#add_patient').click(function() {
  i  ;
  $('#tbl_patient').append('<tr id="row'   i   '" >\
  <td>\
     <input type="text" id="patient'   i   '" name="patient" placeholder="Patient Name" required>\
  </td>\
  <td>\
     <button  type="button" name="remove" id="'   i   '">--</button>\
  </td>\
</tr>');

setTimeout(()=>{
  document.querySelector('tr.hidden:last-of-type').classList.remove('hidden');
},100);
});

$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
    $('#row'   button_id).remove();
});

tr{
  transition:0.5s ease-in-out all;
  opacity:1;
}
.hidden{
  opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_patient">
  <thead>
    <tr>
      <th colspan="2" >Patient</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" id="patient" name="patient" placeholder="Patient Name">
      </td>
      <td>
        <button type="button" name="add_patient" id="add_patient"> </button>
      </td>
    </tr>
  </tbody>
</table>