Overlay transition

src/components/Menu/Overlay.tsx

@@ -1,23 +1,48 @@
 import * as React from 'react'
 
 export interface IOverlayProps {
-    opacity: number
+    show: boolean
     onClickOverlay: () => void
 }
 
-export const Overlay: React.FC<IOverlayProps> = props => {
+export const Overlay: React.FC<IOverlayProps> = ({ children, ...props }) => {
+    const [mounted, setMounted] = React.useState(props.show)
+    const [opacity, setOpacity] = React.useState(0)
     const onClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
         if (event.target === event.currentTarget) {
             props.onClickOverlay()
         }
     }, [props.onClickOverlay])
+    const onTransitionEnd = React.useCallback(() => {
+        console.log('transition end', mounted, opacity)
+        if (opacity === 0) {
+            setMounted(false)
+        }
+    }, [opacity])
 
-    return (
+    React.useEffect(() => {
+        if (!props.show) {
+            setOpacity(0)
+            return
+        }
+
+        setMounted(true)
+        let t = setTimeout(() => {
+            setOpacity(1)
+        }, 16)
+
+        return () => {
+            clearTimeout(t)
+        }
+    }, [props.show])
+
+    return mounted && (
         <div
             style={{
-                opacity: props.opacity
+                opacity,
             }}
             onClick={onClick}
+            onTransitionEnd={onTransitionEnd}
         >
             <style jsx>{`
                 div {
@@ -29,10 +54,13 @@ export const Overlay: React.FC<IOverlayProps> = props => {
                     z-index: 1000000;
 
                     background-color: rgb(255, 255, 255);
+                    opacity: 0;
+
+                    transition: all 200ms;
                 }
             `}</style>
 
-            {props.children}
+            {children}
         </div>
     )
 }

src/components/Menu/index.tsx

@@ -98,32 +98,30 @@ export const Menu: React.FC<IMenuProps> = props => {
                 </li>
             ))}
 
-            {!open ? null : (
-                <Overlay
-                    opacity={1}
-                    onClickOverlay={onClick}
-                >
-                    <div style={{
-                        width: '50%',
-                        margin: '50px auto',
-                    }}>
-                        {props.items.map((item, index) => (
-                            <li key={index}
-                                className={cx(
-                                    item.color, {
-                                    selected: item.highlighted,
-                                })}
-                            >
-                                <MenuItem
-                                    url={itemUrl(item.url)}
-                                    text={item.text}
-                                    active={item.active}
-                                />
-                            </li>
-                        ))}
-                    </div>
-                </Overlay>
-            )}
+            <Overlay
+                show={open}
+                onClickOverlay={onClick}
+            >
+                <div style={{
+                    width: '50%',
+                    margin: '50px auto',
+                }}>
+                    {props.items.map((item, index) => (
+                        <li key={index}
+                            className={cx(
+                                item.color, {
+                                selected: item.highlighted,
+                            })}
+                        >
+                            <MenuItem
+                                url={itemUrl(item.url)}
+                                text={item.text}
+                                active={item.active}
+                            />
+                        </li>
+                    ))}
+                </div>
+            </Overlay>
         </menu>
     )
 }