From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 9 Jan 2024 06:27:09 +0000 (-0800)
Subject: Add fade in transition to table
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=4201377efd5f148be7e3725d243209a070328353;p=event-hashes

Add fade in transition to table
---

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>