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 = [];
+
+    // <!-- FIXME: 暂时以这种略微丑陋的方式做切换动画, 可能这就是唯一方案了 -->
+    setTimeout(() => {
       List = [...data];
+    }, 400);
   }
 
   /**根据 TAG 搜索游戏
@@ -199,7 +205,11 @@
 
 <!-- ----------------------------------------------- DOM ----------------------------------------------- -->
 
-<div class="cardContainer flex flex-wrap justify-evenly gap-4 my-3">
+<!-- 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}
@@ -219,4 +229,5 @@
     <!-- <Card raw_tags="|示例1|示例2|" /> -->
     <!-- <Card raw_tags="|示例1|示例2|" /> -->
     <!-- <Card raw_tags="|示例1|示例2|" /> -->
-</div>
+  </div>
+{/if}