首页卡片动画、固定滑块

templates/index.html

@@ -24,10 +24,16 @@
         --tooltip-text: black;
         --bg-image: none;
         --dark-bg-image: none;
+        --title-transition: color 0.15s ease-in-out;
     }
     * {
         box-sizing: border-box;
     }
+    /* 强制页面内容区域始终显示垂直滚动条 */
+    html {
+        overflow-y: scroll;
+    }
+
     body {
         font-family: 'Segoe UI', system-ui, sans-serif;
         max-width: 1400px;
@@ -35,9 +41,10 @@
         padding: 20px;
         background-color: #f8f9fa;
         color: #333;
-        transition: background-color 0.3s ease, color 0.3s ease;
+        transition: background-color 0.15s ease-in-out;
         overflow-x: hidden;
         width: 100%;
+        overflow-y: auto;
     }
 
     /* 新增私有卡片标记样式 */
@@ -81,7 +88,7 @@
         background-repeat: no-repeat;
         z-index: -1;
         opacity: 0;
-        transition: opacity 0.5s ease;
+        transition: opacity 0.3s ease-in-out;
     }
 
     /* 视频背景容器 */
@@ -145,6 +152,7 @@
         margin-bottom: 30px;
         font-weight: 600;
         position: relative;
+        transition: var(--title-transition);
     }
 
     /* 移除导航栏按钮样式 */
@@ -167,7 +175,7 @@
         border: 1px solid #ddd;
         font-size: 16px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
     }
     .search-results {
         position: absolute;
@@ -179,13 +187,13 @@
         max-height: 300px;
         overflow-y: auto;
         display: none;
-        transition: background-color 0.3s ease;
+        transition: background-color 0.15s ease-in-out;
     }
     .search-result-item {
         padding: 10px 20px;
         border-bottom: 1px solid #eee;
         cursor: pointer;
-        transition: background-color 0.3s ease;
+        transition: background-color 0.15s ease-in-out;
     }
     .search-result-item:hover {
         background: #f5f5f5;
@@ -367,7 +375,7 @@ body.dark-theme .floating-btn#addBtn {
         z-index: 10;
         padding: 15px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        transition: background-color 0.3s ease, color 0.3s ease;
+        transition: background-color 0.15s ease-in-out;
         margin-left: -15px;
         margin-right: -15px;
         padding-left: 20px;
@@ -585,7 +593,7 @@ body.dark-theme .secondary-filters-container::after {
         border-bottom: 2px solid #e9ecef70;
         display: flex;
         align-items: center;
-        transition: color 0.3s ease, border-color 0.3s ease;
+        transition: var(--title-transition);
     }
     .category-title i {
         margin-right: 10px;
@@ -600,6 +608,18 @@ body.dark-theme .secondary-filters-container::after {
         gap: 20px;
         width: 100%;
     }
+
+    /* 新增卡片动画样式 */
+    .app-item {
+        opacity: 0;
+        transform: translateY(20px);
+        transition: opacity 0.5s ease, transform 0.5s ease;
+    }
+    .app-item.visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
     @media (max-width: 1200px) {
         .app-list {
             grid-template-columns: repeat(4, 1fr);
@@ -675,7 +695,7 @@ body.dark-theme .secondary-filters-container::after {
         justify-content: center;
         font-size: 18px;
         color: var(--primary-color);
-        transition: background-color 0.3s ease;
+        transition: background-color 0.15s ease-in-out;
         overflow: hidden;
     }
 
@@ -693,7 +713,7 @@ body.dark-theme .secondary-filters-container::after {
     .app-title {
         font-weight: 600;
         margin-bottom: 4px;
-        transition: color 0.3s ease;
+        transition: var(--title-transition);
     }
     .app-url {
         font-size: 13px;
@@ -701,7 +721,7 @@ body.dark-theme .secondary-filters-container::after {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        transition: color 0.3s ease;
+        transition: color 0.15s ease-in-out;
     }
     .app-tags {
         display: flex;
@@ -1400,6 +1420,20 @@ body.dark-theme .secondary-filters-container::after {
             noResults.textContent = '没有找到匹配的应用';
             appListContainer.appendChild(noResults);
         }
+
+        // 添加卡片动画效果
+        animateCards();
+    }
+
+    // 添加卡片动画效果
+    function animateCards() {
+        const cards = document.querySelectorAll('.app-item');
+        cards.forEach((card, index) => {
+            // 使用setTimeout实现卡片依次出现的效果
+            setTimeout(() => {
+                card.classList.add('visible');
+            }, index * 10); // 每个卡片间隔50ms
+        });
     }
 
     // 辅助函数：计算对比色
@@ -1655,11 +1689,12 @@ body.dark-theme .secondary-filters-container::after {
     }
 
     // 主题切换功能
-// 主题切换功能
     function setupThemeSwitcher() {
         const themeToggle = document.getElementById('themeToggle');
 
         themeToggle.addEventListener('click', () => {
+            // 使用requestAnimationFrame确保在浏览器重绘前完成所有样式变更
+            requestAnimationFrame(() => {
                 // 确定新主题
                 const newTheme = document.body.classList.contains('dark-theme') ? 'light' : 'dark';
 
@@ -1705,6 +1740,7 @@ function setupThemeSwitcher() {
                     localStorage.setItem('navSettings', JSON.stringify(settingsToSave));
                 }
             });
+        });
     }
 
     // 简洁模式切换