Javascript 如何为动态添加的字段添加过渡或淡入效果

var i = 1;

$('#add_patient').click(function() {
  i++;
  $('#tbl_patient').append('<tr id="row' + i + '" class="dynamic-added hidden">\
  <td>\
     <input type="text" id="patient' + i + '" name="patient" placeholder="Patient Name" required>\
  </td>\
  <td>\
     <button class="btn_remove" 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" class="uk-text-center">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>