From b0ae5095317f461bb135cacd6a5d74f52ea8df60 Mon Sep 17 00:00:00 2001 From: icechen Date: Mon, 14 Mar 2022 04:45:19 +0800 Subject: [PATCH] update --- index.html | 2 +- package.json | 1 + pnpm-lock.yaml | 56 ++++++++++++++++++++++++++++++++++++++++ src/pages/home/index.tsx | 43 ++++++++++++++++-------------- 4 files changed, 82 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 7385258..3ef72fd 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index 0030bfe..1c6453f 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "preview": "vite preview" }, "dependencies": { + "@react-spring/web": "^9.4.4", "@reduxjs/toolkit": "^1.8.0", "autoprefixer": "^10.4.2", "axios": "^0.26.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1aaab58..ea0a794 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.3 specifiers: + '@react-spring/web': ^9.4.4 '@redux-devtools/core': ^3.11.0 '@reduxjs/toolkit': ^1.8.0 '@tailwindcss/forms': ^0.5.0 @@ -25,6 +26,7 @@ specifiers: vite: ^2.8.6 dependencies: + '@react-spring/web': 9.4.4_react-dom@17.0.2+react@17.0.2 '@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2 autoprefixer: 10.4.2_postcss@8.4.8 axios: 0.26.1 @@ -360,6 +362,60 @@ packages: fastq: 1.13.0 dev: false + /@react-spring/animated/9.4.4_react@17.0.2: + resolution: {integrity: sha512-e9xnuBaUTD+NolKikUmrGWjX8AVCPyj1GcEgjgq9E+0sXKv46UY7cm2EmB6mUDTxWIDVKebARY++xT4nGDraBQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + dependencies: + '@react-spring/shared': 9.4.4_react@17.0.2 + '@react-spring/types': 9.4.4 + react: 17.0.2 + dev: false + + /@react-spring/core/9.4.4_react@17.0.2: + resolution: {integrity: sha512-llgb0ljFyjMB0JhWsaFHOi9XFT8n1jBMVs1IFY2ipIBerWIRWrgUmIpakLPHTa4c4jwqTaDSwX90s2a0iN7dxQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + dependencies: + '@react-spring/animated': 9.4.4_react@17.0.2 + '@react-spring/rafz': 9.4.4 + '@react-spring/shared': 9.4.4_react@17.0.2 + '@react-spring/types': 9.4.4 + react: 17.0.2 + dev: false + + /@react-spring/rafz/9.4.4: + resolution: {integrity: sha512-5ki/sQ06Mdf8AuFstSt5zbNNicRT4LZogiJttDAww1ozhuvemafNWEHxhzcULgCPCDu2s7HsroaISV7+GQWrhw==} + dev: false + + /@react-spring/shared/9.4.4_react@17.0.2: + resolution: {integrity: sha512-ySVgScDZlhm/+Iy2smY9i/DDrShArY0j6zjTS/Re1lasKnhq8qigoGiAxe8xMPJNlCaj3uczCqHy3TY9bKRtfQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + dependencies: + '@react-spring/rafz': 9.4.4 + '@react-spring/types': 9.4.4 + react: 17.0.2 + dev: false + + /@react-spring/types/9.4.4: + resolution: {integrity: sha512-KpxKt/D//q/t/6FBcde/RE36LKp8PpWu7kFEMLwpzMGl9RpcexunmYOQJWwmJWtkQjgE1YRr7DzBMryz6La1cQ==} + dev: false + + /@react-spring/web/9.4.4_react-dom@17.0.2+react@17.0.2: + resolution: {integrity: sha512-iJmOLdhcuizriUlu/xqBc5y8KaFts+UI+iC+GxyTwBtzxA9czKiSAZW2ESuhG8stafa3jncwjfTQQp84KN36cw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + dependencies: + '@react-spring/animated': 9.4.4_react@17.0.2 + '@react-spring/core': 9.4.4_react@17.0.2 + '@react-spring/shared': 9.4.4_react@17.0.2 + '@react-spring/types': 9.4.4 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + dev: false + /@redux-devtools/core/3.11.0_34362ad81a919891909cf289bf01b934: resolution: {integrity: sha512-LE8GF/9pttlIOYJWqOfwbAvYAokRNHCEtCu0DfA11tksYVwIX79CpB2jIJH/KH7n1LzwXPCCl4MOFnyZH4przg==} peerDependencies: diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 9dbc441..143f25e 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import { animated, useSpring } from "@react-spring/web"; export default function Home() { let [hiddenDrawer, setHiddenDrawer] = useState(true); @@ -70,27 +71,31 @@ function FileButton(props: { openLogin: () => void }) { } function Drawer(props: { hidden: boolean; setHidden: () => void }) { - return props.hidden ? ( - <> - ) : ( -
-
{ - console.log("hidden"); - props.setHidden(); - }} - >
-
-
- + const styles = useSpring({ + opacity: !props.hidden ? 1 : 0, + visibility: !props.hidden ? "visible" : "hidden", + }); + + return ( + +
+
{ + props.setHidden(); + }} + >
+
+
+ +
-
+ ); }