feat: 搜索后的视图渐变效果

src/Content.svelte

@@ -2,6 +2,7 @@
   import Card from './components/card.svelte';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
   import { _category, _env, _tagTrans } from './stores';
+  import { fade } from 'svelte/transition';
 
   // -----------------------------
   // 各种请求封装头 & 请求函数
@@ -99,7 +100,12 @@
    */
   function showList(data) {
     // List = [...List, ...data];
-    List = [...data];
+    List = [];
+
+    // <!-- FIXME: 暂时以这种略微丑陋的方式做切换动画, 可能这就是唯一方案了 -->
+    setTimeout(() => {
+      List = [...data];
+    }, 400);
   }
 
   /**根据 TAG 搜索游戏
@@ -199,24 +205,29 @@
 
 <!-- ----------------------------------------------- DOM ----------------------------------------------- -->
 
-<div class="cardContainer flex flex-wrap justify-evenly gap-4 my-3">
-  {#each List as item}
-    <Card
-      title={item.cn_name}
-      sub_title={item.jp_name}
-      cover={getCover(item.folder)}
-      folder={getFolder(item.folder)}
-      category={item.category}
-      language={$_category[item.category - 1].category_name}
-      raw_tags={item.tags}
-      p_searchTag={searchTag}
-      p_searchCategory={searchCategory}
-    />
-  {/each}
-
-  <!-- 示例卡片, 留着 -->
-  <!-- <Card raw_tags="|示例1|示例2|" /> -->
-  <!-- <Card raw_tags="|示例1|示例2|" /> -->
-  <!-- <Card raw_tags="|示例1|示例2|" /> -->
-  <!-- <Card raw_tags="|示例1|示例2|" /> -->
-</div>
+<!-- NOTE: svelte 绑定 window -> 关闭详情面板 -->
+<svelte:window on:keydown|capture={key_closePanels} />
+
+{#if List.length}
+  <div class="cardContainer flex flex-wrap justify-evenly gap-4 my-3" transition:fade={{ delay: 0, duration: 300 }}>
+    {#each List as item}
+      <Card
+        title={item.cn_name}
+        sub_title={item.jp_name}
+        cover={getCover(item.folder)}
+        folder={getFolder(item.folder)}
+        category={item.category}
+        language={$_category[item.category - 1].category_name}
+        raw_tags={item.tags}
+        p_searchTag={searchTag}
+        p_searchCategory={searchCategory}
+      />
+    {/each}
+
+    <!-- 示例卡片, 留着 -->
+    <!-- <Card raw_tags="|示例1|示例2|" /> -->
+    <!-- <Card raw_tags="|示例1|示例2|" /> -->
+    <!-- <Card raw_tags="|示例1|示例2|" /> -->
+    <!-- <Card raw_tags="|示例1|示例2|" /> -->
+  </div>
+{/if}