Fix transition issue with leave transition and @click.away

packages/alpinejs/src/directives/x-transition.js

@@ -134,9 +134,18 @@ window.Element.prototype._x_toggleAndCascadeWithTransitions = function (el, valu
     let clickAwayCompatibleShow = () => {document.visibilityState === 'visible' ? requestAnimationFrame(show) : setTimeout(show)}
 
     if (value) {
-        el._x_transition
-            ? el._x_transition.in(show)
-            : clickAwayCompatibleShow()
+        if (el._x_transition && (el._x_transition.enter || el._x_transition.leave)) {
+            // This fixes a bug where if you are only transitioning OUT and you are also using @click.outside
+            // the element when shown immediately starts transitioning out. There is a test in the manual
+            // transition test file for this: /tests/cypress/manual-transition-test.html
+            (el._x_transition.enter && (Object.entries(el._x_transition.enter.during).length || Object.entries(el._x_transition.enter.start).length || Object.entries(el._x_transition.enter.end).length))
+                ? el._x_transition.in(show)
+                : clickAwayCompatibleShow()
+        } else {
+            el._x_transition
+                ? el._x_transition.in(show)
+                : clickAwayCompatibleShow()
+        }
 
         return
     }

tests/cypress/manual-transition-test.html

@@ -120,6 +120,19 @@
             </td>
         </tr>
 
+        <tr style="border-bottom: 1px solid black;">
+            <td><code>x-transition.leave only</code></td>
+            <td>
+                <div x-data="{ open: false }">
+                    <button @click="open = ! open">Toggle</button>
+
+                    <div x-show="open" @click.outside="open = false" x-transition.out.duration.1000ms>
+                        Hello 👋
+                    </div>
+                </div>
+            </td>
+        </tr>
+
         <tr>
             <td>
                 <div><code>x-transition:enter.opacity.duration.500ms</code></div>