dh

src/view/sy.vue

@@ -229,9 +229,17 @@
             <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
           </div>
         </div>
-        <ePie2 style="margin-top: 20px" :list="data.ageRatio" v-if="showEchart"></ePie2>
+        <ePie2
+          style="margin-top: 20px"
+          :list="data.ageRatio"
+          v-if="showEchart"
+        ></ePie2>
         <div class="bt">
-          <ePie style="margin-bottom: 20px" :list="data.ageGroup" v-if="showEchart"></ePie>
+          <ePie
+            style="margin-bottom: 20px"
+            :list="data.ageGroup"
+            v-if="showEchart"
+          ></ePie>
           <div
             class="btList"
             ref="mainRef"
@@ -267,6 +275,8 @@
               政务服务
             </div>
           </div>
+          <transition name="fade" mode="out-in" appear v-if="choose == '1'">
+            <div>
               <div class="dailyActivity" v-if="choose == '1'">
                 <div class="dailyActivityBox">
                   <div class="dailyActivitybottom">
@@ -323,6 +333,9 @@
               </template>
             </el-table-column> -->
               </el-table>
+            </div></transition
+          >
+          <transition name="fade" mode="out-in" appear v-if="choose == '2'">
             <div class="qyfw" v-if="choose == '2'">
               <div
                 class="qyfw_item"
@@ -339,8 +352,10 @@
                   </div>
                 </div>
               </div>
-          </div>
+            </div></transition
-          <div class="zwfw" v-if="choose == '3'">
+          >
+          <transition name="fade" mode="out-in" appear v-if="choose == '3'">
+            <div class="zwfw">
               <div class="shang">
                 <div class="shang_item">
                   <div class="title">一网通办事</div>
@@ -381,6 +396,7 @@
                 </div>
               </div>
             </div>
+          </transition>
         </div>
       </div>
     </div>
@@ -624,7 +640,7 @@ import qyfw2 from "../assets/images/sy/rzbms.png";
 import qyfw3 from "../assets/images/sy/shqys.png";
 import qyfw4 from "../assets/images/sy/dxje.png";
 //控制echart的显示
-const showEchart=ref(false)
+const showEchart = ref(false);
 // 详情弹框
 const dialogShow = ref(false);
 const dialogShowEc = ref(false);
@@ -3069,4 +3085,23 @@ table {
     }
   }
 }
+/* 渐变设置 */
+.fade-enter-from,
+.fade-leave-to {
+  transform: translateY(50px);
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.fade-enter-active {
+  transition: all 1s ease;
+}
+
+.fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
+}
 </style>