JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<a href="#">click</a>
<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>one</td>
      <td>example</td>
    </tr>
  </tbody>
</table>

SCSS

table {
  border-collapse: collapse;
  margin: 20px;
  width: calc(100% - 40px); 
  
  tr {
/*     opacity: 0;
    transform: scale(0.6, 0.6);
    transition: opacity 0.2s ease-out; */
    
    td {
      background: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      transition: all 1s ease-out;
    }

    &.pulsating {
      
      td {
        background: #DCE8DC;
        transition: all 1s cubic-bezier;
      }
    }
  }
}

JavaScript

$('a').click(function() {
	$new_row = $(
  	'<tr>'+
    	'<td>another</td>'+
      '<td>example</td>'+
    '</tr>'
  );

	$('tbody').append($new_row);
  
  setTimeout(function() {
		$new_row.addClass('pulsating');
    
    setTimeout(function() {
    	$new_row.removeClass('pulsating');
    }, 1000);
  }, 100);
});