fix:登录逻辑优化2

src/pages/Login/index.vue

@@ -98,7 +98,7 @@ const  back = () => {
 </script>
 <template>
   <div class="login-box">
-    <p class="login-title">登录</p>
+    <transition name="flip-card" mode="out-in">
     <div class="user-box" v-if="!showPassword">
       <p class="title">选择用户</p>
       <div class="user-list">
@@ -138,6 +138,7 @@ const  back = () => {
         <el-icon><Back /></el-icon>
       </div>
     </div>
+    </transition>
   </div>
 
 </template>
@@ -172,6 +173,7 @@ const  back = () => {
   font-weight: bold;
 }
 .login-box {
+  perspective: 1000px;
   width: 100%;
   height: 100%;
   background: #A0CEF2;
@@ -318,4 +320,42 @@ const  back = () => {
     color: #fff;
   }
 }
+
+
+.flip-card-leave-active,
+.flip-card-enter-active {
+  transition: all 0.5s ease;
+  backface-visibility: hidden; /* 隐藏背面 */
+}
+
+.flip-card-enter-from,
+.flip-card-leave-to {
+  transform: rotateY(90deg);
+  opacity: 0;
+}
+
+.flip-card-enter-active .user-box,
+.flip-card-leave-active .user-box,
+.flip-card-enter-active .password-box,
+.flip-card-leave-active .password-box {
+  position: absolute;
+  backface-visibility: hidden;
+  transition: transform 0.5s ease;
+}
+
+.flip-card-enter .user-box {
+  transform: rotateY(-90deg);
+}
+
+.flip-card-leave-to .user-box {
+  transform: rotateY(90deg);
+}
+
+.flip-card-enter .password-box {
+  transform: rotateY(90deg);
+}
+
+.flip-card-leave-to .password-box {
+  transform: rotateY(-90deg);
+}
 </style>