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

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 + '" class="dynamic-added">
  <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>');
});

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

Answer

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 + '" 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>

Advertisement

Answer