From 95dc8be6e85c5f224e0f7a2ff0f91a0fa3a056f9 Mon Sep 17 00:00:00 2001
From: HoshinoKoji <hoshino_koji@163.com>
Date: Wed, 5 Mar 2025 15:02:40 +0800
Subject: [PATCH] Enhance App.vue with transition effects and show/hide panel
 logic

---
 src/App.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3d9b97d..1fe1c0a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script>
 import { ElMessage } from 'element-plus';
 import { isProxy } from 'vue';
+import { sprintf } from 'sprintf-js';
 import lang from './lang.js';
 
 /*
@@ -35,6 +36,7 @@ export default {
       title: undefined,
       started: undefined,
       items: [],
+      showPanel: true,
       currentIdx: undefined,
       itemStatus: {
         item: undefined,
@@ -139,6 +141,7 @@ export default {
         }
       }
 
+      this.showPanel = false;
       item.answer = this.itemStatus.answer;
       item.refilled = this.itemStatus.refilled;
       item.responseTime = new Date().getTime() - this.itemStatus.timestamp;
@@ -156,8 +159,11 @@ export default {
       if (this.currentIdx === this.items.length - 1) {
         this.submit();
       } else {
-        this.currentIdx++;
-        this.updateItem();
+        setTimeout(() => {
+          this.currentIdx++;
+          this.updateItem();
+          this.showPanel = true;
+        }, 300);
       }
     },
     autoNext() {
@@ -195,7 +201,7 @@ export default {
 
 <template>
   <div v-if="!isReady">Loading...</div>
-  <el-container id="main" v-if="isReady">
+  <transition name="el-fade-in-linear"><el-container id="main" v-if="isReady" v-show="showPanel">
     <el-header height=24pt>
       <el-text class="mx-1" type="primary"><span id="display-title">{{ itemStatus.title }}</span></el-text>
     </el-header>
@@ -252,7 +258,7 @@ export default {
         </el-button-group>
       </el-footer>
     </el-main>
-  </el-container>
+  </el-container></transition>
 </template>
 
 <style scoped>