Only call x-show when the value changes

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

@@ -38,9 +38,19 @@ directive('show', (el, { modifiers, expression }, { effect }) => {
         }
     )
 
+    let oldValue
+    let firstTime = true
+
     effect(() => evaluate(value => {
+        // Let's make sure we only call this effect if the value changed.
+        // This prevents "blip" transitions. (1 tick out, then in)
+        if (! firstTime && value === oldValue) return
+
         if (modifiers.includes('immediate')) value ? clickAwayCompatibleShow() : hide()
 
         toggle(value)
+
+        oldValue = value
+        firstTime = false
     }))
 })

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

@@ -155,7 +155,7 @@ window.Element.prototype._x_toggleAndCascadeWithTransitions = function (el, valu
                     let carry = Promise.all([
                         el._x_hidePromise,
                         ...(el._x_hideChildren || []).map(hideAfterChildren)
-                    ]).then(([i]) => i && i())
+                    ]).then(([i]) => i())
 
                     delete el._x_hidePromise
                     delete el._x_hideChildren
@@ -235,9 +235,7 @@ export function performTransition(el, stages, entering) {
     el._x_transitioning = {
         beforeCancels: [],
         beforeCancel(callback) { this.beforeCancels.push(callback) },
-        cancel: once(function () {
-            while (this.beforeCancels.length) { this.beforeCancels.shift()() }; finish();
-        }),
+        cancel: once(function () { while (this.beforeCancels.length) { this.beforeCancels.shift()() }; finish(); }),
         finish,
         entering
     }