fixbug: 修改登陆页面动画显示不流畅

jsxiaosi · Jan 3, 2022 · efb7e82 · efb7e82
1 parent b2bca4c
commit efb7e82
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 86 deletions.
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -8,29 +8,31 @@
     <div class="application enter-x">
       <AppLocale class="icon-size enter-x"></AppLocale>
     </div>
-    <div class="login-box enter-x">
+    <div class="login-box">
       <div class="login-form">
         <h2 class="enter-x p-4">SuperCuteXiaoSi</h2>
-        <span>{{ t('sys.login.userName') }}：admin {{ t('sys.login.password') }}：admin123</span>
-        <form>
-          <div class="input-group user enter-x">
-            <SvgIcon class-name="icon" name="iEL-avatar"></SvgIcon>
-            <div>
-              <h5>{{ t('sys.login.userName') }}</h5>
-              <input
-                v-model="user"
-                type="text"
-                class="input"
-                @focus="onUserFocus"
-                @blur="onUserBlur"
-              />
-            </div>
+        <div class="enter-x"
+          >{{ t('sys.login.userName') }}：admin {{ t('sys.login.password') }}：admin123</div
+        >
+        <div class="input-group user enter-x">
+          <SvgIcon class-name="icon" name="iEL-avatar"></SvgIcon>
+          <div>
+            <h5>{{ t('sys.login.userName') }}</h5>
+            <input
+              v-model="user"
+              type="text"
+              class="input"
+              @focus="onUserFocus"
+              @blur="onUserBlur"
+            />
           </div>
-          <div class="input-group pwd enter-x">
-            <SvgIcon class-name="icon" name="password"></SvgIcon>
+        </div>
+        <div class="input-group pwd enter-x">
+          <SvgIcon class-name="icon" name="password"></SvgIcon>
 
-            <div>
-              <h5>{{ t('sys.login.password') }}</h5>
+          <div>
+            <h5>{{ t('sys.login.password') }}</h5>
+            <form>
               <input
                 v-model="pwd"
                 type="password"
@@ -39,9 +41,9 @@
                 @focus="onPwdFocus"
                 @blur="onPwdBlur"
               />
-            </div>
+            </form>
           </div>
-        </form>
+        </div>
         <button class="btn enter-x" @click="onLogin">
           {{ t('sys.login.loginButton') }}
         </button>

diff --git a/windi.config.ts b/windi.config.ts
@@ -1,75 +1,74 @@
-import { defineConfig } from 'vite-plugin-windicss'
+import { defineConfig } from 'vite-plugin-windicss';
 // import { primaryColor } from './build/config/themeConfig'
 
 export default defineConfig({
-	darkMode: 'class',
-	plugins: [createEnterPlugin()],
-	theme: {
-		extend: {
-			zIndex: {
-				'-1': '-1',
-			},
-			colors: {
-				primary: '#409eff',
-			},
-			screens: {
-				sm: '576px',
-				md: '768px',
-				lg: '992px',
-				xl: '1200px',
-				'2xl': '1600px',
-			},
-		},
-	},
-})
+  darkMode: 'class',
+  plugins: [createEnterPlugin()],
+  theme: {
+    extend: {
+      zIndex: {
+        '-1': '-1',
+      },
+      colors: {
+        primary: '#409eff',
+      },
+      screens: {
+        sm: '576px',
+        md: '768px',
+        lg: '992px',
+        xl: '1200px',
+        '2xl': '1600px',
+      },
+    },
+  },
+});
 
 /**
  * Used for animation when the element is displayed.
  * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
  */
 function createEnterPlugin(maxOutput = 6) {
-	const createCss = (index: number, d = 'x') => {
-		const upd = d.toUpperCase()
-		return {
-			[`*> .enter-${d}:nth-child(${index})`]: {
-				transform: `translate${upd}(50px)`,
-			},
-			[`*> .-enter-${d}:nth-child(${index})`]: {
-				transform: `translate${upd}(-50px)`,
-			},
-			[`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]:
-				{
-					'z-index': `${10 - index}`,
-					opacity: '0',
-					animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-					'animation-fill-mode': 'forwards',
-					'animation-delay': `${(index * 1) / 10}s`,
-				},
-		}
-	}
-	const handler = ({ addBase }) => {
-		const addRawCss = {}
-		for (let index = 1; index < maxOutput; index++) {
-			Object.assign(addRawCss, {
-				...createCss(index, 'x'),
-				...createCss(index, 'y'),
-			})
-		}
-		addBase({
-			...addRawCss,
-			[`@keyframes enter-x-animation`]: {
-				to: {
-					opacity: '1',
-					transform: 'translateX(0)',
-				},
-			},
-			[`@keyframes enter-y-animation`]: {
-				to: {
-					opacity: '1',
-					transform: 'translateY(0)',
-				},
-			},
-		})
-	}
-	return { handler }
+  const createCss = (index: number, d = 'x') => {
+    const upd = d.toUpperCase();
+    return {
+      [`*> .enter-${d}:nth-child(${index})`]: {
+        transform: `translate${upd}(50px)`,
+      },
+      [`*> .-enter-${d}:nth-child(${index})`]: {
+        transform: `translate${upd}(-50px)`,
+      },
+      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+        'z-index': `${10 - index}`,
+        opacity: '0',
+        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+        'animation-fill-mode': 'forwards',
+        'animation-delay': `${(index * 1) / 10}s`,
+      },
+    };
+  };
+  const handler = ({ addBase }) => {
+    const addRawCss = {};
+    for (let index = 1; index < maxOutput; index++) {
+      Object.assign(addRawCss, {
+        ...createCss(index, 'x'),
+        ...createCss(index, 'y'),
+      });
+    }
+    addBase({
+      ...addRawCss,
+      [`@keyframes enter-x-animation`]: {
+        to: {
+          opacity: '1',
+          transform: 'translateX(0)',
+        },
+      },
+      [`@keyframes enter-y-animation`]: {
+        to: {
+          opacity: '1',
+          transform: 'translateY(0)',
+        },
+      },
+    });
+  };
+  return { handler };
 }