From 4201377efd5f148be7e3725d243209a070328353 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 8 Jan 2024 22:27:09 -0800
Subject: [PATCH] Add fade in transition to table

---
 index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 65ebd1f..b19ca45 100644
--- a/index.html
+++ b/index.html
@@ -94,9 +94,11 @@
     }
 
     table {
-      display: none;
+      visibility: hidden;
+      opacity: 0;
       border-collapse: collapse;
       margin: auto;
+      transition: opacity 300ms;
     }
 
     tr {
@@ -225,7 +227,8 @@
     const table = document.querySelector('table');
     const tableBody = document.querySelector('table tbody');
     textarea.addEventListener('input', debounce(() => {
-      table.style.setProperty('display', 'none');
+      table.style.setProperty('visibility', 'hidden');
+      table.style.setProperty('opacity', 0);
       tableBody.innerHTML = '';
 
       const events = getEvents(textarea.value);
@@ -238,7 +241,8 @@
         const hash = `0x${[...byteArray].map(b => b.toString(16).padStart(2, '0')).join('')}`;
         tableBody.insertAdjacentHTML('beforeend', `<tr><td>${event}</td><td>${hash}</td></tr>`);
       }
-      table.style.setProperty('display', 'revert');
+      table.style.setProperty('visibility', 'visible');
+      table.style.setProperty('opacity', 1);
     }, 250));
   </script>
 </body>
-- 
2.47.3