add a better way of hanling 'handle' method

dist/alpine-ie11.js

@@ -6255,7 +6255,7 @@
 
     var initialUpdate = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
 
-    // Resolve any previous pending transitions before starting a new one
+    // if value is changed resolve any previous pending transitions before starting a new one
     if (el.__x_transition_remaining && el.__x_transition_last_value !== value) {
       el.__x_transition_remaining();
     }
@@ -6291,42 +6291,33 @@
 
       _newArrowCheck(this, _this);
 
-      if (!value) {
+      if (value) {
+        transitionIn(el, function () {
+          _newArrowCheck(this, _this2);
+
+          show();
+        }.bind(this), component);
+        resolve(function () {
+          _newArrowCheck(this, _this2);
+        }.bind(this));
+      } else {
         if (el.style.display !== 'none') {
           transitionOut(el, function () {
             var _this3 = this;
 
             _newArrowCheck(this, _this2);
 
-            // If previous transitions still there, don't use resolve
-            if (el.__x_transition_remaining) {
-              hide();
-            } else {
-              resolve(function () {
-                _newArrowCheck(this, _this3);
+            resolve(function () {
+              _newArrowCheck(this, _this3);
 
-                hide();
-              }.bind(this));
-            }
+              hide();
+            }.bind(this));
           }.bind(this), component);
         } else {
           resolve(function () {
             _newArrowCheck(this, _this2);
           }.bind(this));
         }
-      } else {
-        if (el.style.display !== '') {
-          transitionIn(el, function () {
-            _newArrowCheck(this, _this2);
-
-            show();
-          }.bind(this), component);
-        } // Resolve immediately, only hold up parent `x-show`s for hiding.
-
-
-        resolve(function () {
-          _newArrowCheck(this, _this2);
-        }.bind(this));
       } // Asign current value to el to check later on for preventing transition overlaps
 
 

dist/alpine.js

@@ -654,7 +654,7 @@
   }
 
   function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
-    // Resolve any previous pending transitions before starting a new one
+    // if value is changed resolve any previous pending transitions before starting a new one
     if (el.__x_transition_remaining && el.__x_transition_last_value !== value) {
       el.__x_transition_remaining();
     }
@@ -682,30 +682,21 @@
     }
 
     const handle = resolve => {
-      if (!value) {
+      if (value) {
+        transitionIn(el, () => {
+          show();
+        }, component);
+        resolve(() => {});
+      } else {
         if (el.style.display !== 'none') {
           transitionOut(el, () => {
-            // If previous transitions still there, don't use resolve
-            if (el.__x_transition_remaining) {
+            resolve(() => {
               hide();
-            } else {
-              resolve(() => {
-                hide();
-              });
-            }
+            });
           }, component);
         } else {
           resolve(() => {});
         }
-      } else {
-        if (el.style.display !== '') {
-          transitionIn(el, () => {
-            show();
-          }, component);
-        } // Resolve immediately, only hold up parent `x-show`s for hiding.
-
-
-        resolve(() => {});
       } // Asign current value to el to check later on for preventing transition overlaps
 
 

src/directives/show.js

@@ -28,37 +28,28 @@ export function handleShowDirective(component, el, value, modifiers, initialUpda
     }
 
     const handle = (resolve) => {
-        if (! value) {
+        if(value) {
+            transitionIn(el,() => {
+                show()
+            }, component)
+            resolve(() => {})
+        } else {
             if ( el.style.display !== 'none' ) {
                 transitionOut(el, () => {
-                    // If there is a remaning transition
-                    // and value is changed, don't use resolve
-                    if ( el.__x_transition_remaining ) {
+                    resolve(() => {
                         hide()
-                    } else {
-                        resolve(() => {
-                            hide()
-                        })
-                    }
-                }, component)
+                    })
+                },component)
             } else {
                 resolve(() => {})
             }
-        } else {
-            if ( el.style.display !== '' ) {
-                transitionIn(el, () => {
-                    show()
-                }, component)
-            }
-
-            // Resolve immediately, only hold up parent `x-show`s for hiding.
-            resolve(() => {})
         }
 
         // Asign current value to el to check later on for preventing transition overlaps
         el.__x_transition_last_value = value
     }
 
+
     // The working of x-show is a bit complex because we need to
     // wait for any child transitions to finish before hiding
     // some element. Also, this has to be done recursively.