重构

src/views/login.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="login">
-    <img :src="loginBg" alt="" srcset="" class="login-bg" />
+    <transition :name="bgTransitionName">
+      <img :key="bgNum" :src="loginBg" alt="" srcset="" class="login-bg" />
+    </transition>
     <el-form
       ref="loginForm"
       :model="loginForm"
@@ -107,6 +109,8 @@ export default {
   data() {
     return {
       bgNum: 1,
+      bgTransitionName: "bg-slide",
+      bgTransitionNames: ["bg-slide", "bg-zoom", "bg-blur"],
       codeUrl: "",
       loginForm: {
         username: "admin",
@@ -148,7 +152,12 @@ export default {
     this.updateInterval(this.updateBgNum, 5000);
   },
   methods: {
+    randomBgTransitionName() {
+      const index = Math.floor(Math.random() * this.bgTransitionNames.length);
+      return this.bgTransitionNames[index];
+    },
     updateBgNum() {
+      this.bgTransitionName = this.randomBgTransitionName();
       if (this.bgNum >= 4) this.bgNum = 0;
       this.bgNum += 1;
     },
@@ -210,6 +219,10 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  min-height: 100vh;
   padding-left: 180px;
   display: flex;
   justify-content: left;
@@ -224,6 +237,60 @@ export default {
   display: block;
   height: 100%;
   width: 100%;
+  object-fit: cover;
+  object-position: center;
+  backface-visibility: hidden;
+  will-change: opacity, transform, filter;
+}
+.bg-fade-enter-active,
+.bg-fade-leave-active {
+  transition: opacity 0.9s ease, transform 0.9s ease;
+}
+.bg-fade-enter {
+  opacity: 0;
+  transform: scale(1.04);
+}
+.bg-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.98);
+}
+.bg-slide-enter-active,
+.bg-slide-leave-active {
+  transition: opacity 0.85s ease, transform 0.85s ease;
+}
+.bg-slide-enter {
+  opacity: 0;
+  transform: translate3d(3.5%, 0, 0) scale(1.01);
+}
+.bg-slide-leave-to {
+  opacity: 0;
+  transform: translate3d(-3.5%, 0, 0) scale(0.99);
+}
+.bg-zoom-enter-active,
+.bg-zoom-leave-active {
+  transition: opacity 1s ease, transform 1s ease;
+}
+.bg-zoom-enter {
+  opacity: 0;
+  transform: scale(1.08);
+}
+.bg-zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.94);
+}
+.bg-blur-enter-active,
+.bg-blur-leave-active {
+  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
+}
+.bg-blur-enter {
+  opacity: 0;
+  filter: blur(8px);
+  transform: scale(1.02);
+}
+.bg-blur-leave-to {
+  opacity: 0;
+  filter: blur(6px);
+  transform: scale(0.98);
 }
 .login-logo {
   display: block;