Tengo una sección de entrada con el botón Agregar/Eliminar, que agrega campos de entrada adicionales. Estoy tratando de que el campo de entrada aparezca con un efecto de transición en lugar de aparecer instantáneamente.
Traté de usar la transition pero no ayudó. ¿Es posible hacerlo a través de CSS puro?
Código
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>No uso jQuery, así que tuve que usar un poco de Javascript vainilla, pero esencialmente la transición se aplica a la fila de la tabla y usa la opacity de 0 a 1 para crear el efecto de aparición gradual.
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>