Add files via upload

CookSleep · Jul 24, 2024 · 1182871 · 1182871
1 parent d8d2cb6
commit 1182871
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 36 deletions.
diff --git a/script.js b/script.js
@@ -160,14 +160,16 @@ function calculateProviderCost(row, inputTokensInBaseUnit, outputTokensInBaseUni
 function displayResults(results) {
     results.sort((a, b) => a.costCNY - b.costCNY);
     const resultsList = document.getElementById('results-list');
+    resultsList.innerHTML = '';
+
     const resultsContainer = document.querySelector('.results');
+    const originalHeight = resultsContainer.offsetHeight;
 
     const tempContainer = document.createElement('div');
     tempContainer.style.visibility = 'hidden';
     tempContainer.style.position = 'absolute';
-    tempContainer.style.top = '0';
-    tempContainer.style.left = '0';
-    tempContainer.style.width = '100%';
+    tempContainer.style.width = resultsContainer.offsetWidth + 'px';
+    document.body.appendChild(tempContainer);
 
     results.forEach((r, index) => {
         const resultItem = document.createElement('div');
@@ -180,19 +182,10 @@ function displayResults(results) {
         tempContainer.appendChild(resultItem);
     });
 
-    resultsContainer.appendChild(tempContainer);
-    const newHeight = tempContainer.scrollHeight;
-    resultsContainer.removeChild(tempContainer);
-
-    resultsContainer.style.height = `${resultsContainer.offsetHeight}px`;
-    resultsContainer.style.transition = 'height 0.5s ease-in-out';
-
-    requestAnimationFrame(() => {
-        resultsContainer.style.height = `${newHeight}px`;
-    });
+    const newHeight = tempContainer.offsetHeight;
+    document.body.removeChild(tempContainer);
 
-    setTimeout(() => {
-        resultsList.innerHTML = '';
+    animateResultsContainer(originalHeight, newHeight, () => {
         results.forEach((r, index) => {
             const resultItem = document.createElement('div');
             resultItem.classList.add('result-item', 'slide-down');
@@ -204,29 +197,27 @@ function displayResults(results) {
             `;
             resultsList.appendChild(resultItem);
         });
-
-        setTimeout(() => {
-            resultsContainer.style.height = 'auto';
-            resultsContainer.style.transition = '';
-        }, 500);
-    }, 500);
+    });
 }
 
 function animateResultsContainer(fromHeight, toHeight, callback) {
     const resultsContainer = document.querySelector('.results');
     resultsContainer.style.height = `${fromHeight}px`;
     resultsContainer.style.transition = 'height 0.5s ease-in-out';
-    
+
     requestAnimationFrame(() => {
         resultsContainer.style.height = `${toHeight}px`;
     });
 
-    setTimeout(() => {
+    const transitionEndHandler = () => {
         resultsContainer.style.height = 'auto';
         resultsContainer.style.transition = '';
         resultsContainerHeight = toHeight;
         if (callback) callback();
-    }, 500);
+        resultsContainer.removeEventListener('transitionend', transitionEndHandler);
+    };
+
+    resultsContainer.addEventListener('transitionend', transitionEndHandler);
 }
 
 function clearAllData() {
@@ -268,17 +259,9 @@ function clearResultsList(container, items) {
 
         setTimeout(() => {
             container.innerHTML = '';
-            container.style.height = `${originalHeight}px`;
-            container.style.transition = 'height 0.5s ease-in-out';
-
-            requestAnimationFrame(() => {
-                container.style.height = 'auto';
-            });
-
-            setTimeout(() => {
-                container.style.transition = '';
-                resolve();
-            }, 500);
+            animateResultsContainer(originalHeight, container.scrollHeight);
+            resultsContainerHeight = container.scrollHeight;
+            resolve();
         }, 500);
     });
 }

diff --git a/styles.css b/styles.css
@@ -359,7 +359,7 @@ select {
     border-radius: 12px;
     margin-bottom: 30px;
     box-shadow: var(--main-shadow);
-    overflow: hidden;
+    overflow: visible;
     min-height: 100px;
     transition: height 0.5s ease-in-out, box-shadow 0.3s ease;
 }