调整界面切换动画

src/components/SubScreen/index.jsx

@@ -5,13 +5,17 @@ import {animated,easings} from "@react-spring/web";
 import {useState,useEffect} from "react";
 import {useSpring, useSpringRef} from "@react-spring/core";
 import {sleep} from "@utils/helpers";
+import {useThemeProvider} from "@contexts/themeContext";
+import CSSTransition from "react-transition-group/CSSTransition";
 const i18n=global.i18n;
 
-const SubScreen=({open,onClose,children,route,timeout,header})=>{
+const SubScreen=({open,onClose,children,route,timeout=500,level=0,header,...props})=>{
     // const [subOpen,setSubOpen]=useState(open);
     // console.log(header)
     const subOpen=open;
     const duration=timeout;
+    const {setIsOpenSub}=useThemeProvider();
+    if (level===0)setIsOpenSub(subOpen);
     // const duration=50;
 
     const delayClose=()=>{
@@ -25,15 +29,15 @@ const SubScreen=({open,onClose,children,route,timeout,header})=>{
     //     };
     // },[])
 
-    const showAni=useSpring({
-        // ref: spref,
-        from: {transform: 'translateX(100%) translateZ(0px)'},
-        transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
-        config: {
-            easing: easings.linear,
-            duration:duration
-        },
-    });
+    // const showAni=useSpring({
+    //     // ref: spref,
+    //     from: {transform: 'translateX(100%) translateZ(0px)',transition:`transform ${timeout}ms cubic-bezier(0, 0, 0.2, 1) 0ms`},
+    //     transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
+    //     config: {
+    //         // easing: easings.linear,
+    //         duration:duration
+    //     },
+    // });
     const renderHeader=()=>{
         let title=route?route.title:"";
         return (
@@ -63,27 +67,32 @@ const SubScreen=({open,onClose,children,route,timeout,header})=>{
         )
     }
     const renderContent=()=>{
-        // addExtraChildProps(children);
-        // let list=children.length==null?[children]:children;
-        // // {children}
         return (
             <div className={styles.content}>
                 {children}
-                {/*{renderComp?renderComp({close}):(<></>)}*/}
             </div>
         )
     }
     return (
-        <animated.div className={styles.subscreen} style={showAni}>
-            {renderBar()}
-            {renderContent()}
-        </animated.div>
+        <CSSTransition timeout={timeout} {...props} classNames={{
+            enter: styles.subscreen_enter,
+            enterActive: styles.subscreen_enter_active,
+            exit: styles.subscreen_exit,
+            exitActive: styles.subscreen_exit_active,
+        }}>
+            {/*<animated.div className={styles.subscreen} style={showAni}>*/}
+            {/*<animated.div className={styles.subscreen}>*/}
+            <div className={styles.subscreen}>
+                {renderBar()}
+                {renderContent()}
+            </div>
+            {/*</animated.div>*/}
+        </CSSTransition>
     )
 }
 SubScreen.propTypes = {
     open: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
-    // children: PropTypes.node.isRequired
 }
 
 export default SubScreen

src/components/SubScreen/styles.module.scss

@@ -1,3 +1,17 @@
+.subscreen_enter{
+  transform:translateX(100%) translateZ(0);
+}
+.subscreen_enter_active{
+  transition: transform var(--transition);
+  transform: translateX(0%) translateZ(0);
+}
+.subscreen_exit{
+  transform: translateX(0%) translateZ(0);
+}
+.subscreen_exit_active{
+  transition: transform var(--transition);
+  transform: translateX(100%) translateZ(0);
+}
 .subscreen{
   display: flex;
   position: fixed;
@@ -5,6 +19,7 @@
   height: 100%;
   pointer-events: auto;
   background: var(--body);
+  //transform:translateX(100%) translateZ(0px);
   & .appbar{
     display: flex;
     flex-direction: column;

src/contexts/themeContext.js

@@ -44,7 +44,7 @@ export const ThemeProvider = ({children}) => {
 
     const [searchData,setSearchData]=useState(null);
 
-    const [showHeader, setShowHeader] = useState(true);
+    const [showHeader, setShowHeader] = useState(false);
 
     //GameSearch
 
@@ -59,6 +59,7 @@ export const ThemeProvider = ({children}) => {
 
     //show wd pass box
     const [isShowWDPassBox,setIsShowWDPassBox]=useState(false);
+    const [isOpenSub, setIsOpenSub]=useState(false)
     const isLogin=useSelector(isLogined);
     const user=useSelector(getUserInfo);
     const initWindowSize=()=>{
@@ -190,7 +191,10 @@ export const ThemeProvider = ({children}) => {
                 installOpen,
                 toggleInstallOpen,
                 isShowWDPassBox,
-                setIsShowWDPassBox
+                setIsShowWDPassBox,
+                //是否打开sub
+                isOpenSub,
+                setIsOpenSub
             }}>
             {children}
         </ThemeContext.Provider>

src/index.js

@@ -3,27 +3,27 @@ import './Global'
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import {BrowserRouter, MemoryRouter} from 'react-router-dom';
+import {BrowserRouter} from 'react-router-dom';
 import {ThemeProvider} from '@contexts/themeContext';
 import {ShopProvider} from '@contexts/shopContext';
 import {Provider} from 'react-redux';
 import store from './app/store';
 import * as Sentry from "@sentry/react";
 global.dispatch=store.dispatch;
-Sentry.init({
-    dsn: "https://4686ef0d926e140fb482e63efcde1cdf@o4507102375641088.ingest.us.sentry.io/4507102380687360",
-    integrations: [
-        Sentry.browserTracingIntegration(),
-        Sentry.replayIntegration(),
-    ],
-    // Performance Monitoring
-    tracesSampleRate: 1.0, //  Capture 100% of the transactions
-    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
-    // Session Replay
-    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-});
+// Sentry.init({
+//     dsn: "https://4686ef0d926e140fb482e63efcde1cdf@o4507102375641088.ingest.us.sentry.io/4507102380687360",
+//     integrations: [
+//         Sentry.browserTracingIntegration(),
+//         Sentry.replayIntegration(),
+//     ],
+//     // Performance Monitoring
+//     tracesSampleRate: 1.0, //  Capture 100% of the transactions
+//     // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+//     tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+//     // Session Replay
+//     replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+//     replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+// });
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/layout/BottomNav/styles.module.scss

@@ -13,6 +13,7 @@
     align-items: center;
     justify-content: space-between;
     gap: 20px;
+    pointer-events:auto;
 }
 
 .button {

src/layout/Layout.jsx

@@ -31,7 +31,7 @@ const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 const Layout=()=>{
     const appRef = useRef(null);
     const msgBoxRef=useRef(null);
-    const {isMobile,isShowWheel, setIsShowWheel,isShowWDPassBox,setIsShowWDPassBox} = useThemeProvider();
+    const {isMobile,isShowWheel, setIsShowWheel,isShowWDPassBox,setIsShowWDPassBox,isOpenSub} = useThemeProvider();
     const {pathname, search, hash} = useLocation();
     const isFull = useSelector(isFullRoute(pathname));
     const inRoutes=useSelector(routesIn);
@@ -49,24 +49,28 @@ const Layout=()=>{
     },[msgBoxRef])
     const renderIn=()=>{
         return (
-            <div className={`app`} ref={appRef}>
-                <ScrollToTop/>
-                <Sidebar/>
-                <Navbar/>
-                {isMobile() && <BottomNav/>}
-                <AppContainer>
-                    <div className="app_container-content d-flex flex-column flex-1">
-                        <Suspense fallback={<LoadingIn />}>
-                            <CBrowserRouter isLogin={isLogin} routes={inRoutes}/>
-                        </Suspense>
-                    </div>
-                    <Footer />
-                </AppContainer>
-                <GameSearchPanel />
-            </div>
+            <>
+                <div className={`app ${isMobile()&&isOpenSub ? 'app_openSub' : ''}`} ref={appRef}>
+                    <ScrollToTop/>
+                    <AppContainer>
+                        <div className="app_container-content d-flex flex-column flex-1">
+                            <Suspense fallback={<LoadingIn/>}>
+                                <CBrowserRouter isLogin={isLogin} routes={inRoutes}/>
+                            </Suspense>
+                        </div>
+                        <Footer/>
+                    </AppContainer>
+                    <GameSearchPanel/>
+                </div>
+                <div className={`app-top  ${isMobile()&&isOpenSub ? 'app_openSub' : ''}`}>
+                    <Sidebar/>
+                    <Navbar/>
+                    {isMobile() && <BottomNav/>}
+                </div>
+            </>
         )
     }
-    const renderInFull=()=>{
+    const renderInFull = () => {
         return (
             <div className={`app fluid`} ref={appRef}>
                 <ScrollToTop/>
@@ -78,7 +82,7 @@ const Layout=()=>{
             </div>
         )
     }
-    const renderHash=()=>{
+    const renderHash = () => {
         return (
             <CHashRouter isLogin={isLogin} routes={popRoutes} hlocation={{
                 pathname: pathname,

src/layout/Navbar/index.jsx

@@ -249,7 +249,7 @@ const PageHeader = () => {
     const currRoute=useSelector(getRoute(pathname));
     const chain=useSelector(getRouteChain(pathname));
     const {isMobile,showHeader,setShowHeader} = useThemeProvider();
-    const [showMHeader, setShowMHeader] = useState(true);
+    const [showMHeader, setShowMHeader] = useState(false);
     const isLogin=useSelector(isLogined);
     let lastscroll=0;
 

src/layout/Navbar/styles.module.scss

@@ -30,6 +30,7 @@
   border-bottom: 1px solid var(--border);
   padding-left:85px;
   box-shadow:var(--widget-shadow);
+  pointer-events: auto;
   &.nav_open{
     padding-left:270px;
   }

src/layout/Routes/RouteContainer.jsx

@@ -25,9 +25,9 @@ const RouteContainer=(props)=>{
     }
     const renderSub=()=>{
         return (
-            <SubScreen {...props}>
-                {children}
-            </SubScreen>
+                <SubScreen {...props}>
+                    {children}
+                </SubScreen>
         )
     }
     const renderPopOrFull=()=>{

src/layout/Routes/RouteWrapper.jsx

@@ -15,7 +15,7 @@ import useScrollLock from "@hooks/useScrollLock";
 import {useLocation} from "react-router";
 const i18n=global.i18n;
 const RouteWrapper = (props) => {
-    const {isMobile} = useThemeProvider();
+    const {isMobile,setIsOpenSub} = useThemeProvider();
     const { Comp, route} = props;
     const navigate = useNavigate()
     const {pathname,hash} = useLocation();

src/layout/Routes/index.jsx

@@ -56,7 +56,7 @@ const CBrowserRouter=(props)=>{
 }
 const CHashRouter=(props)=>{
     const {routes,hlocation,isLogin}=props;
-    const {checkRoute}=useThemeProvider();
+    const {checkRoute,setIsOpenSub}=useThemeProvider();
     const navigate = useNavigate();
     //多hash 切到最后一个
     let {pathname,hash,search}=hlocation;
@@ -66,9 +66,10 @@ const CHashRouter=(props)=>{
     let paths=pathname.split("#");
     pathname=paths.shift();
     let hashs=hash.split("#");
+    hashs.shift();
     let currpath=pathname+hash;
     let currhash="";
-    const timeout=200;
+    // const timeout=500;
     //多hash 切到最后一个
     const getRoutes=(path)=>{
         for (const route of routes) {
@@ -111,8 +112,8 @@ const CHashRouter=(props)=>{
                     }
                     currhash+=hash;
                     return (
-                        <CSSTransition timeout={timeout}>
-                            <RouteContainer route={route} timeout={timeout} onClose={handleClose} header={Header[route.component]}>
+                        // <CSSTransition timeout={timeout}>
+                            <RouteContainer level={index} route={route} onClose={handleClose} header={Header[route.component]}>
                                 <Suspense fallback={<SmallLoading/>}>
                                     <Routes key={index} location={{pathname:currpath,hash:hash,search}}>
                                         {
@@ -126,7 +127,7 @@ const CHashRouter=(props)=>{
                                     </Routes>
                                 </Suspense>
                             </RouteContainer>
-                        </CSSTransition>
+                        // </CSSTransition>
                     )
                 })
             }

src/layout/Sidebar/index.jsx

@@ -112,6 +112,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
         flexShrink: 0,
         whiteSpace: 'nowrap',
         boxSizing: 'border-box',
+        pointerEvents: 'auto',
         // overflowX:'hidden',
         ...(open && {
             ...openedMixin(theme),
@@ -526,6 +527,7 @@ const Sidebar = () => {
     const renderMobile=()=>{
         return (
             <MuiDrawer open={open} sx={{
+                pointerEvents: 'auto',
                 "& .MuiDrawer-paper": {
                     width: drawMobieWidth,
                     boxSizing: "border-box",

src/styles/_global.scss

@@ -25,6 +25,11 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    transition: transform var(--transition),opacity var(--transition);
+    &_openSub{
+        transform: translateX(-50%) translateZ(0);
+        opacity: 0;
+    }
     &_container {
         display: flex;
         flex-direction: column;
@@ -83,6 +88,13 @@ body {
         }
     }
 }
+.app-top{
+    position: fixed;
+    inset: 0px;
+    z-index: var(--zindex-in);
+    transition: transform var(--transition),opacity var(--transition);
+    pointer-events: none;
+}
 .app-hash{
     position: fixed;
     z-index: var(--zindex-second);