change style

src/pages/editor/Container.tsx

@@ -23,12 +23,13 @@ import { ActionCreators } from 'redux-undo';
 import { StateWithHistory } from 'redux-undo';
 import styles from './index.less';
 import { useGetBall } from 'react-draggable-ball';
+import { useAnimation } from '@/utils/tool';
 
 const { TabPane } = Tabs;
 
 const Container = (props: { history?: any; location?: any; pstate?: any; dispatch?: any }) => {
   const [scaleNum, setScale] = useState(1);
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
 
   const { pstate, dispatch } = props;
   const pointData = pstate ? pstate.pointData : {};
@@ -41,6 +42,7 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
   };
 
   const toggleCollapsed = (checked: boolean) => {
+    console.log(checked);
     setCollapsed(checked);
   };
 
@@ -120,6 +122,8 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
     intervalDelay: 5,
   });
 
+  const [display] = useAnimation(collapsed, 500);
+
   return (
     <div className={styles.editorWrap}>
       <HeaderComponent
@@ -131,7 +135,14 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
         toggleCollapsed={toggleCollapsed}
       />
       <div className={styles.container}>
-        <div className={!collapsed ? styles.list : styles.collapsed}>
+        <div
+          className={styles.list}
+          style={{
+            transform: collapsed ? 'translate(0,0)' : 'translate(-100%,0)',
+            transition: 'all ease-in-out 0.5s',
+            display: display ? 'none' : 'block',
+          }}
+        >
           <div className={styles.searchBar}>
             <Alert
               banner

src/pages/editor/components/Header/index.tsx

@@ -136,7 +136,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
           <ArrowLeftOutlined />
         </div>
         <div className={styles.logo}>Dooring</div>
-        {/* <Switch onChange={toggleCollapsed} style={{ marginLeft: '100px' }} />暂时隐藏 TODO */}
+        <Switch defaultChecked onChange={toggleCollapsed} style={{ marginLeft: '100px' }} />
       </div>
       <div className={styles.controlArea}>
         <Button type="primary" style={{ marginRight: '9px' }} onClick={useTemplate}>

src/pages/editor/index.less

@@ -18,10 +18,10 @@
     width: 100%;
   }
   .container {
-    width: 100%; //写vw产生滚动条会出现横向滚动条
     // height: 100vh;
     height: calc(100% - 56px);
     display: flex;
+
     .list {
       width: 350px;
       height: 100%;
@@ -56,10 +56,10 @@
       }
     }
     .tickMark {
-      width: calc(100% - 750px);
       overflow: hidden;
       height: 100%;
       position: relative;
+      flex: 1;
       .tickMarkTop {
         width: 100%;
         height: 50px;
@@ -152,6 +152,7 @@
       height: 100%;
       box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1);
       overflow: auto;
+
       .tit {
         margin-bottom: 16px;
         font-size: 18px;
@@ -205,10 +206,6 @@
         }
       }
     }
-    .collapsed {
-      .list;
-      height: calc(56px);
-    }
   }
 }
 

src/utils/tool.ts

@@ -63,3 +63,21 @@ export function useGetScrollBarWidth(ref: RefObject<HTMLElement>) {
   }, [ref]);
   return width;
 }
+
+export function useAnimation(state: boolean, delay: number) {
+  const [display, setDisplay] = useState(false);
+  useEffect(() => {
+    let timer: number;
+    if (state && display === true) {
+      setDisplay(false);
+    } else if (!state && display === false) {
+      timer = window.setTimeout(() => {
+        setDisplay(true);
+      }, delay);
+    }
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [delay, display, state]);
+  return [display, setDisplay];
+}