修改过渡界面的动画显示效果

pages/transition/page7/page7.vue

@@ -2,7 +2,6 @@
   <view class="background">
     <!--按钮-->
     <image class="button" @click="goToLoginPage" src="@/static/transition/page7/pictures/button.png"></image>
-
   </view>
 </template>
 
@@ -25,18 +24,30 @@ export default {
   background-position: center;
   height: 100vh;
   display: flex;
-  flex-direction: column; /* 纵向排列 */
-  align-items: center; /* 水平居中 */
-  justify-content: flex-end; /* 使内容向底部对齐 */
-  position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+}
+
+/* 渐变显示动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .button {
-  position: absolute; /* 绝对定位 */
+  position: absolute;
   width: 80%;
   height: 12%;
-  bottom: 5%; /* 距离底部 20% 的位置 */
-  left: 50%; /* 水平居中 */
-  transform: translateX(-50%); /* 通过 translateX 使其居中 */
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0; /* 初始为透明 */
+  animation: fadeIn 2s ease-in forwards; /* 2秒渐变显示 */
 }
 </style>