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>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>