feat: use AnimatePresence for modal out

nexpy-io · Nov 17, 2022 · 6427fef · 6427fef
1 parent e081934
commit 6427fef
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.1.6",
+  "version": "2.1.7",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",

diff --git a/src/components/molecules/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx
@@ -15,7 +15,7 @@ import {
   ModalPortalDedupleContext,
   ModalPortalDedupleProvider,
 } from 'contexts/ModalPortalDedupleContext'
-import { motion } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
 
 import { FlexProps } from 'components/atoms'
 import { Portal } from 'components/hocs/Portal'
@@ -39,18 +39,6 @@ export type ModalProps = {
   disableUseOnClickOutside?: boolean
 } & Omit<CardProps, 'children'>
 
-const motionBackgroundVariants = {
-  hidden: {
-    opacity: 0,
-    transitionEnd: {
-      display: 'none',
-    },
-  },
-  visible: {
-    opacity: 1,
-  },
-}
-
 const ModalBase = ({
   render,
   externalIsOpen,
@@ -87,25 +75,24 @@ const ModalBase = ({
 
       <ModalPortalDedupleProvider>
         <Portal enabled={!hasParentModal}>
-          <motion.div
-            variants={motionBackgroundVariants}
-            initial='hidden'
-            animate={modalIsOpen ? 'visible' : 'hidden'}
-            transition={{
-              default: { duration: 0.3 },
-            }}
-            style={{
-              ...(modalIsOpen && {
-                display: 'block',
-              }),
-            }}
-          >
-            <ModalBackground variant='center' {...backgroundProps}>
-              <ModalCard ref={modalMainRef} {...props}>
-                {render({ isOpen: modalIsOpen, setIsOpen, excludeRef })}
-              </ModalCard>
-            </ModalBackground>
-          </motion.div>
+          <AnimatePresence>
+            {modalIsOpen ? (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{
+                  default: { duration: 0.3 },
+                }}
+              >
+                <ModalBackground variant='center' {...backgroundProps}>
+                  <ModalCard ref={modalMainRef} {...props}>
+                    {render({ isOpen: modalIsOpen, setIsOpen, excludeRef })}
+                  </ModalCard>
+                </ModalBackground>
+              </motion.div>
+            ) : null}
+          </AnimatePresence>
         </Portal>
       </ModalPortalDedupleProvider>
     </>