dklm

photo/node_modules/.cache/babel-loader/a11076c93fdfd4d092fb1e7975f47acf.json

@@ -0,0 +1 @@
+{"ast":null,"code":"","map":{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[""]},"metadata":{},"sourceType":"module"}

photo/src/modal.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles((theme) => ({
+    modal: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    paper: {
+        backgroundColor: theme.palette.background.paper,
+        border: '2px solid #000',
+        boxShadow: theme.shadows[5],
+        padding: theme.spacing(2, 4, 3),
+    },
+}));
+
+export default function TransitionsModal() {
+    const classes = useStyles();
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return ( <
+        div >
+        <
+        button type = "button"
+        onClick = { handleOpen } >
+        react - transition - group <
+        /button> <
+        Modal aria - labelledby = "transition-modal-title"
+        aria - describedby = "transition-modal-description"
+        className = { classes.modal }
+        open = { open }
+        onClose = { handleClose }
+        closeAfterTransition BackdropComponent = { Backdrop }
+        BackdropProps = {
+            {
+                timeout: 500,
+            }
+        } >
+        <
+        Fade in = { open } >
+        <
+        div className = { classes.paper } >
+        <
+        h2 id = "transition-modal-title" > Transition modal < /h2> <
+        p id = "transition-modal-description" > react - transition - group animates me. < /p> <
+        /div> <
+        /Fade> <
+        /Modal> <
+        /div>
+    );
+}

photo/src/testM.js

@@ -33,6 +33,7 @@ import Icon from '@material-ui/core/Icon';
 import AddCircle from '@material-ui/icons/AddCircle';
 import CloudIcon from '@material-ui/icons/Cloud';
 import LinearProgress from '@material-ui/core/LinearProgress';
+import handleModalOpen from './modal';
 const drawerWidth = 240;
 
 const BorderLinearProgress = withStyles((theme) => ({
@@ -169,6 +170,7 @@ export default function ButtonAppBar() {
         谷狗相薄 <
         /Typography>  <Button
         variant = "contained"
+        onClick = { handleModalOpen }
         startIcon = { < CloudUploadIcon / > } >
         Upload <
         /Button><IconButton style={{ color: '#ffffff' }} aria-label="delete"> <