【需求 20331】 styles: 加入过度效果

src/views/homePage/index.vue

@@ -215,7 +215,8 @@
           </div>
 
           <div class="flex flex-col gap-2 sm:gap-3">
-            <div v-show="currentTaskList.length">
+            <transition name="fade-home" mode="out-in">
+              <div v-if="currentTaskList.length">
                 <div v-for="item in currentTaskList" :key="item.id">
                   <div
                     class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group"
@@ -264,11 +265,10 @@
                   <el-divider style="margin: 0" />
                 </div>
               </div>
-            <div v-show="currentTaskList.length === 0">
-              <div class="flex items-center justify-center">
+              <div v-else class="flex items-center justify-center">
                 <el-empty :image-size="100" description="暂无任务" />
               </div>
-            </div>
+            </transition>
           </div>
         </div>
         <!-- 每日抽奖 -->