Merge pull request #17 from DeepBlueCLtd/16-animate-addition-of-plus-icons

animate introduction of plus icon

Author: IanMayo

src/style.css

@@ -82,6 +82,17 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.gs-plus-icon {
+  opacity: 0;
+  transform: scale(0.7);
+  transition: opacity 500ms cubic-bezier(0.4,0,0.2,1), transform 500ms cubic-bezier(0.4,0,0.2,1);
+}
+
+.gs-plus-icon.gs-plus-icon--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/ui/header-utils.ts

@@ -9,6 +9,8 @@ const PLUS_ICON_CLASS = 'gs-plus-icon';
 const HEADER_WITH_ICON_CLASS = 'gs-has-plus-icon';
 const PLUS_ICON_ACTIVE_CLASS = 'gs-plus-icon--active';
 
+const SHORT_TIME = 10
+
 export function injectPlusIcons(table: HTMLTableElement, columnTypes: ColumnType[]): void {
   // Remove any existing plus icons first
   removePlusIcons(table);
@@ -105,6 +107,12 @@ function addPlusIconToHeader(header: HTMLTableCellElement, type: HeaderType): vo
   plusIcon.textContent = '+';
   plusIcon.style.marginLeft = '4px';
   plusIcon.style.cursor = 'pointer';
+
+  // Animate appearance
+  // Add the visible class after a tick to trigger the transition
+  setTimeout(() => {
+    plusIcon.classList.add('gs-plus-icon--visible');
+  }, SHORT_TIME);
 
   // Add click handler
   plusIcon.addEventListener('click', (e) => {