修改

src/views/windowsIndex.vue

@@ -1,11 +1,14 @@
 <template>
   <el-row class="main">
-    <el-col :span="24" class="bigImage" :class="{ 'new-style': isScrollingDown }"></el-col>
+    <transition name="fade-scale">
+      <el-col :span="24" v-if="isScrollingDown" class="bigImage new-style"></el-col>
+      <el-col :span="24" v-else class="bigImage"></el-col>
+    </transition>
     <el-col :span="24" class="info">
       <el-col :span="24" class="menus">
         <menusIndex />
       </el-col>
-      <transition name="fade">
+      <transition name="fade-scale">
         <el-row v-if="isScrollingDown" class="new-title">
           <div class="title">长春水投</div>
         </el-row>
@@ -95,6 +98,25 @@ onBeforeUnmount(() => {
     background-size: 100% 100%;
   }
 
+  @keyframes fadeScale {
+    0% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .fade-scale-enter-active {
+    animation: fadeScale 1s ease-out;
+  }
+
+  .fade-scale-leave-active {
+    animation: fadeScale 1s ease-out reverse;
+  }
+
   .new-style {
     height: 10em;
     width: 100%;
@@ -112,16 +134,25 @@ onBeforeUnmount(() => {
       height: 66px;
       overflow: hidden;
     }
-    /* 定义淡入淡出过渡效果的 CSS 类 */
-    .fade-enter-active,
-    .fade-leave-active {
-      transition: opacity 0.5s ease;
+    @keyframes fadeScale {
+      0% {
+        opacity: 0;
+        transform: scale(0.8);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
 
-    .fade-enter-from,
-    .fade-leave-to {
-      opacity: 0;
+    .fade-scale-enter-active {
+      animation: fadeScale 2s ease-out;
     }
+
+    .fade-scale-leave-active {
+      animation: fadeScale 2s ease-out reverse;
+    }
+
     .new-title {
       display: flex;
       padding: 0 17%;