Fix x-transition fast double click bug (#2339)

package-lock.json

@@ -7798,14 +7798,15 @@
             }
         },
         "packages/alpinejs": {
-            "version": "3.4.2",
+            "version": "3.5.0",
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "~3.1.1"
             }
         },
         "packages/collapse": {
-            "version": "3.4.2",
+            "name": "@alpinejs/collapse",
+            "version": "3.5.0",
             "license": "MIT"
         },
         "packages/csp": {
@@ -7818,7 +7819,7 @@
         },
         "packages/docs": {
             "name": "@alpinejs/docs",
-            "version": "3.4.2-revision.2",
+            "version": "3.5.0-revision.1",
             "license": "MIT"
         },
         "packages/history": {
@@ -7831,7 +7832,7 @@
         },
         "packages/intersect": {
             "name": "@alpinejs/intersect",
-            "version": "3.4.2",
+            "version": "3.5.0",
             "license": "MIT"
         },
         "packages/morph": {
@@ -7844,12 +7845,12 @@
         },
         "packages/persist": {
             "name": "@alpinejs/persist",
-            "version": "3.4.2",
+            "version": "3.5.0",
             "license": "MIT"
         },
         "packages/trap": {
             "name": "@alpinejs/trap",
-            "version": "3.4.2",
+            "version": "3.5.0",
             "license": "MIT",
             "dependencies": {
                 "focus-trap": "^6.6.1"

packages/collapse/src/index.js

@@ -46,17 +46,22 @@ export default function (Alpine) {
             },
 
             out(before = () => {}, after = () => {}) {
-                Alpine.setStyles(el, {
-                    overflow: 'hidden'
-                })
-
                 let full = el.getBoundingClientRect().height
 
                 Alpine.transition(el, setFunction, {
                     during: transitionStyles,
                     start: { height: full+'px' },
                     end: { height: floor+'px' },
-                }, () => {}, () => el._x_isShown = false)
+                }, () => {}, () => {
+                    el._x_isShown = false
+
+                    // check if element is fully collapsed
+                    if (el.style.height == `${floor}px`) {
+                        Alpine.nextTick(() => Alpine.setStyles(el, {
+                            overflow: 'hidden'
+                        }))
+                    }
+                })
             },
         }
     })

tests/cypress/manual-transition-test.html

@@ -174,8 +174,8 @@
                 <div x-data="{ show: false }">
                     <button @click="show = !show">Show</button>
 
-                    <div x-show="show" x-collapse>
-                        <div class="ring-2 ring-offset-2 ring-red-400">my red ring should be fully visible</div>
+                    <div x-show="show" x-collapse.duration.2000ms>
+                        <div class="ring-2 ring-offset-2 ring-red-400 py-10 bg-gray-200">my red ring should be fully visible</div>
                     </div>
                   </div>
                 </div>