[Solved] Headless UI Transition not working with Dialog – Reactjs

The Problem:

In a Next.js application when utilizing the Headless UI Dialog component, it appears that the transition effect is only working when the dialog closes, not upon opening. The goal is to have a smooth transition for both opening and closing the dialog.

The Solutions:

Solution 1: Include Transition.Child Component

The Headless UI Transition component requires the “Transition.Child” component to enable smooth transition effects. This component is used to wrap the child elements that you want to transition, such as your Dialog panel. By incorporating “Transition.Child,” you can control the transition behavior and provide the necessary animation properties to achieve the desired effect when the modal enters and leaves the screen.

Here’s an example that includes the “Transition.Child” component within your modal:

import { Dialog, Transition, Transition.Child } from "@headlessui/react";

function Modal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {/* Trigger the modal */}
       setIsOpen(true)}>Open Modal

      
        {/* Transition.Child wraps the modal content */}
        
          
 setIsOpen(false)}
          >
            {/* Modal content */}
          
        
      
    
  );
}

export default Modal;

In this example, the “Transition.Child” component wraps the Dialog component, ensuring that its content will transition smoothly when the modal is opened and closed.

Remember to adjust the animation properties, such as “enter,” “enterFrom,” “enterTo,” “leave,” “leaveFrom,” and “leaveTo,” to achieve the desired transition effect for your modal.

Video Explanation:

The following video, titled "Dismissing a Radix Dialog after a form submission - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

A Solution to Radix Themes' Specificity Issues. Frontend FYI•3.3K views · 20:48 ... Headless UI vs Radix UI React/Vue Primitives | The Compared EP ...