Leave transitions not working #292

idechow · 2021-03-27T03:49:01Z

idechow
Mar 27, 2021

Using NextJS trying to implement one of the tailwind sidebars. I have state (isOpen and setIsOpen) being passed in from _app. Transitions weren't working at all until I added appear={true}. However now only the enter transitions work. The leave transitions don't work at all. What am I doing wrong?

##########################################

function MyApp({ Component, pageProps }) {
   const router = useRouter()
   const [isOpen, setIsOpen] = useState(false);

   useEffect(() => {
      setIsOpen(false);
   }, [router.asPath]);
   
   return (
      <Layout key={isOpen} isOpen={isOpen} setIsOpen={setIsOpen}>
         <Head meta={meta}/>
         <Component {...pageProps} />
      </Layout>
   )
}

export default MyApp

##########################################

export const Layout = ({ isOpen, setIsOpen, children }) => {

   const SmallNav = () => (
      <Transition show={isOpen} unmount={false} appear={true} className="fixed inset-0 flex z-40 md:hidden" role="dialog" aria-modal="true">

         <Transition.Child
            unmount={false}
            enter="transition-opacity ease-linear duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="transition-opacity ease-linear duration-300"
            leaveFrom="opacity-100"
            leaveTo="opacity-0" 
            className="fixed inset-0 bg-gray-600 bg-opacity-75" 
            aria-hidden="true" />

         <Transition.Child
            unmount={false}
            enter="transition ease-in-out duration-300 transform"
            enterFrom="-translate-x-full"
            enterTo="translate-x-0"
            leave="transition ease-in-out duration-300 transform"
            leaveFrom="translate-x-0"
            leaveTo="-translate-x-full" 
            className="relative flex-1 flex flex-col max-w-xs w-full bg-white" >

            <Transition.Child
               unmount={false}
               enter="ease-in-out duration-300"
               enterFrom="opacity-0"
               enterTo="opacity-100"
               leave="ease-in-out duration-300"
               leaveFrom="opacity-100"
               leaveTo="opacity-0" 
               className="absolute top-0 right-0 -mr-12 pt-2">

               <button onClick={() => setIsOpen(false)}
                  className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                  <span className="sr-only">Close sidebar</span>
                  <svg className="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                  </svg>
               </button>
               
            </Transition.Child>
            <Menu />
            {/* footer here */}
         </Transition.Child>
         <div className="flex-shrink-0 w-14"></div>
      </Transition>
   );

   const LargeNav = () => (
      <div className="hidden md:flex md:flex-shrink-0">
         <div className="flex flex-col w-64">
            <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
               <Menu />
               {/* footer here */}
            </div>
         </div>
      </div>
   );

   const Main = () => (
      <div className="flex flex-col w-0 flex-1 overflow-hidden">
         <div className="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
            <button onClick={() => setIsOpen(true)}
               className="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
               <span className="sr-only">Open sidebar</span>
               <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
               </svg>
            </button>
         </div>
         <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabIndex="0">
            {children}
         </main>
      </div>
   );

   return (
      <div className="h-screen flex overflow-hidden bg-gray-100">
         <SmallNav />
         <LargeNav />
         <Main />
      </div>
   )
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Leave transitions not working #292

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Leave transitions not working #292

idechow Mar 27, 2021

Replies: 0 comments

idechow
Mar 27, 2021