Resolving the transition effect problem in Tailwind CSS and Alpine JS

I have successfully implemented a basic button and modal combination using Tailwind and Alpine - check out the demo here: https://jsfiddle.net/0pso5cxh/

However, I am facing an issue with the leave transition. When the cancel button or close icon is clicked, the fade animation does not occur and the modal abruptly disappears. Since this is my first time working with Tailwind and Alpine, any guidance on resolving this would be greatly appreciated!

      <div x-data="{ addDonationOpen: false }">
        <button @click="addDonationOpen = !addDonationOpen" class="bg-teal-700 hover:bg-teal-500 hover:text-gray-900 focus:bg-teal-500 focus:outline-none focus:shadow-outline text-white focus:text-gray-900 px-4 py-2 rounded font-medium mr-6"><i class="fas fa-plus-square pr-1"></i> Add Donation</button>
    
        <div x-show="addDonationOpen" :class="{'flex': addDonationOpen, 'fixed': addDonationOpen, 'hidden': !addDonationOpen}" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0" x-transition:enter-end="transform opacity-100" x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="transform opacity-100" x-transition:leave-end="transform opacity-0" class="w-full h-100 inset-0 z-50 overflow-hidden justify-center items-center" style="background: rgba(0,0,0,.7);">
          <div class="border border-teal-500 shadow-lg modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
            <div class="modal-content py-4 text-left px-6">
              <!--Title-->
              <div class="flex justify-between items-center pb-3">
                <p class="text-2xl font-bold">Header</p>
                <div @click="addDonationOpen = !addDonationOpen" class="modal-close cursor-pointer z-50">
                  <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                    viewBox="0 0 18 18">
                    <path
                      d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
                    </path>
                  </svg>
                </div>
              </div>
              <!--Body-->
              <div class="my-5">
                <p>Inliberali Persius Multi iustitia pronuntiaret expeteretur sanos didicisset laus angusti ferrentur arbitrium arbitramur huic desiderent.?</p>
              </div>
              <!--Footer-->
              <div class="flex justify-end pt-2">
                <button @click="addDonationOpen = !addDonationOpen" class="focus:outline-none modal-close px-4 bg-gray-400 p-3 rounded-lg text-black hover:bg-gray-300">Cancel</button>
                <button class="focus:outline-none px-4 bg-teal-500 p-3 ml-3 rounded-lg text-white hover:bg-teal-400">Confirm</button>
              </div>
            </div>
          </div>
        </div>
      </div>

Answer №1

The reason the out animation is not working is because you are manually adding a hidden class using the x-class binding.

Try removing the entire set of conditions with x-class on line 4 - the x-show directive will handle the transition for you in a more efficient way.

Ensure to include the fixed class in your class= attribute to make sure it still applies to your CSS styles.

Answer №2

Personally, I implement the following code snippet within the header section of my file:

<style>
    [x-cloak] { display: none }
</style>

This allows me to use x-cloak on any elements within my project.

    x-cloak

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The picture is unavailable for inline viewing

I am currently working with bootstrap and I have a requirement to show an image followed by some text. However, despite having enough space after the image, the text keeps getting pushed to the next line. Below is my code: <div class="splash"> < ...

Easily style Angular directives (whether they are custom or built-in) using the native handle for CSS

In my Angular application, I have directives set up as follows: <!doctype html> <html lang="en" ng-app="cfd"> <head> ... </head> <body> <div class="container"> <!-- Header --> <div ...

The material UI tabs text is missing the ellipses due to a coding error

As a newcomer to web development, I am experimenting with adding an ellipsis to the span element within the tabs. <div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;"> <div class="MuiTabs-flexContainer"> ...

Issue with React Js: Text Sphere not appearing on page reload

Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear u ...

What is the best way to move information from one table to a different one?

I have two tables: users2 and user_totals. Each of these tables has rows named clicks (impression_count), fclicks (use_count), and completed_stus (completion_count). The ones in brackets are the new additions in the user_totals table. I would like to tra ...

Mobile devices seem to be constantly refreshing website images

I have a landing page consisting of multiple sections with images as the background, each section occupying the full screen. In one specific section, the images change every 5 seconds. The website works smoothly on desktop, but I encounter issues on mobil ...

Customize the color of Bootstrap active tabs to have a unique and distinct hue for each tab

I have successfully managed to change the color of both active and non-active tabs as a group, but I am wondering if it is possible for the color to remain the same when moving to the next tab. Here is what I've tried: http://jsfiddle.net/pThn6/2031/ ...

Take a breather with a break in a div's outline

I'm looking to add a break on the right border of my div which already has an outline around it. Here's a visual example of how I want it to look like: (how I want it to look like) Here is my HTML code: <div class="carouseldiv w-75 mx-au ...

Having the `overflow:auto` property conceals additional content

I've been experimenting with a demo on my website that incorporates snap.js and chart.js. Check out the demo on JSFIDDLE here After adding some JavaScript to show chart.js content while scrolling, I encountered a problem with the CSS style on line 1 ...

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...

Effect of Active or Focus on the HTML <ul> element

Check out this example of a UL tag: <ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;"> <li>I am waiting </li> <li>I am waiting </li> <li>I am waiting </li> <li>I am wa ...

Tips for creating a stylish navbar with a faded effect on the right side and integrating a fresh button into its design

I'm looking to enhance my Navbar by implementing a feature where, if the width of the Navbar exceeds that of its parent div, it will fade on the right side and a new button will be added - similar to what can be seen on Youtube. 1- When the Navbar&ap ...

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

Is there a way to adjust the positioning of the center item in owl carousel 2 after applying a scale transformation of 2.0, without it getting cropped vertically?

I am having an issue with using Bootstrap card and owl carousel 2. When I apply transform: scale(2.0) to the center item, it becomes vertically cropped instead of staying centered. It overflows in the owl-stage section. Is there a way to fix this problem? ...

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

Issues arising when checking the responsiveness of the navigation bar on display

Recently, I encountered an issue with the navigation bar on my webpage. It contains an image logo on the left and three links on the right. The problem arises when I test the responsiveness using different devices on Chrome; the navigation bar resizes and ...

Hover-activated dropdown menu

After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here ...

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...