Merge pull request #149 from xianshenglu/perf

perf(react-vite): replace dynamic width with scaleX for AppNav underline

Author: xianshenglu

demo/react-vite/src/shared/components/AppNav/AppNav.module.less

@@ -31,10 +31,10 @@
 }
 .AppNav__underline {
   height: 4px;
-  width: 88px;
   // margin-left: @padding_width;
   box-sizing: border-box;
   background: @theme;
   transition: 0.5s ease;
-  transition-property: width, transform;
+  transition-property: transform;
+  transform-origin: left;
 }

demo/react-vite/src/shared/components/AppNav/AppNav.tsx

@@ -5,6 +5,7 @@ import { useSwipe } from '../../hooks/useSwipe'
 import { navList } from './navList'
 import styles from './AppNav.module.less'
 import { useOffsetToParent } from './useOffsetToParent'
+const NAV_UNDERLINE_WIDTH = 100;
 
 const AppNav: FC = memo((props) => {
   const navigate = useNavigate()
@@ -22,7 +23,6 @@ const AppNav: FC = memo((props) => {
       }
     }
   })
-
   return (
     <section className={styles.AppNav}>
       <nav className={styles.AppNav__box}>
@@ -45,8 +45,8 @@ const AppNav: FC = memo((props) => {
       <div
         className={styles.AppNav__underline}
         style={{
-          width: activeNavOffset.width+'px',
-          transform: `translateX(${activeNavOffset.left}px)`
+          width: NAV_UNDERLINE_WIDTH + 'px',
+          transform: `translateX(${activeNavOffset.left}px) scaleX(${activeNavOffset.width/NAV_UNDERLINE_WIDTH})`,
         }}
       />
     </section>