CSS Animation Fade In and Fade Out

by Kenneth Kin Lum

HTML

<button id="btn">Click</button>
<table id="tbl">
  <tbody>
    <tr>
      <td>1</td>
      <td>10</td>
    </tr>
    <tr>
      <td>2</td>
      <td>20</td>
    </tr>
    <tr>
      <td>3</td>
      <td>30</td>
    </tr>
    <tr>
      <td>4</td>
      <td>40</td>
    </tr>
    <tr>
      <td>5</td>
      <td>50</td>
    </tr>
    <tr>
      <td>6</td>
      <td>60</td>
    </tr>
    <tr>
      <td>7</td>
      <td>70</td>
    </tr>
    <tr>
      <td>8</td>
      <td>80</td>
    </tr>
    <tr>
      <td>9</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

CSS

body {
  background: #fff;
}

table {
  border-collapse: collapse;
  margin: 20px;
}

td {
  padding: 0.3em 1.23em;
  border: 1px solid #ccc;
}

.new-row {
  animation: 1.2s forwards fade_in_and_out;
}

@keyframes fade_in_and_out {
  0% {
    opacity: 0;
    background: #fff
  }

  50% {
    opacity: 1;
    background: #ff0
  }

  100% {
    opacity: 1;
    background: #fff
  }
}

JavaScript

const tableElement = document.querySelector("#tbl tbody");

 const findWhichRow = (tableElement, newRow) => {
   const children = tableElement.children;
   const arr = Array.from(children).map(e => +e.children[1].innerHTML),
     target = +newRow.children[1].innerHTML;
   let low = 0,
     high = children.length - 1;

   while (low <= high) {

     const mid = low + Math.floor((high - low) / 2);
     if (target >= arr[mid]) { // the left side cannot be it
       low = mid + 1;
     } else {
       high = mid - 1;
     }
   }

   if (low === arr.length) return null;
   else return children[low];

 };

 const addNewRow = (tableElement, newRow) => {
   const newCell1 = document.createElement("td"),
     newCell2 = document.createElement("td");

   newRow.append(newCell1);
   newRow.append(newCell2);
   newCell1.append(document.createTextNode("hello"));
   newCell2.append(document.createTextNode(`${Math.floor(Math.random() * 100)}`));
   const insertBeforeThis = findWhichRow(tableElement, newRow);

   if (insertBeforeThis) {
     tableElement.insertBefore(newRow, insertBeforeThis);
   } else {
     tableElement.append(newRow);
   }

 };

 document.querySelector("#btn").addEventListener("click", ev => {
   const newRow = document.createElement("tr");

   addNewRow(tableElement, newRow);
   newRow.classList.add("new-row");
 });