Home Explore Help
Register Sign In
oleg
/
alpine
mirror of https://github.com/alpinejs/alpine.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

fixed repainting terminating the current transition

Muzaffer Dede 5 years ago
parent
467c0c2f5f
commit
ed1108784b
4 changed files with 38 additions and 12 deletions
Unified View Show Diff Stats
  1. 17 6
      dist/alpine.js
  2. 6 0
      examples/index.html
  3. 9 4
      src/directives/show.js
  4. 6 2
      src/utils.js

+ 17 - 6
dist/alpine.js
View File 

@@ -197,6 +197,7 @@
 
     }
 
     }
 
   }
 
   }
 
   function transitionOut(el, hide, component, forceSkip = false) {
 
   function transitionOut(el, hide, component, forceSkip = false) {
 
+    // We don't want to transition on the initial page load.
 
     if (forceSkip) return hide();
 
     if (forceSkip) return hide();
 
     const attrs = getXAttrs(el, component, 'transition');
 
     const attrs = getXAttrs(el, component, 'transition');
 
     const showAttr = getXAttrs(el, component, 'show')[0];
 
     const showAttr = getXAttrs(el, component, 'show')[0];
 
@@ -416,9 +417,13 @@
 
 
 
 
 
           delete el.__x_remaining_transitions;
 
           delete el.__x_remaining_transitions;
 
+
 
+          if (el.__x_transition_timer) {
 
+            clearTimeout(el.__x_transition_timer);
 
+          }
 
         };
 
         };
 
 
 
-        setTimeout(() => {
 
+        el.__x_transition_timer = setTimeout(() => {
 
           // We only want to run remaining transitions in the end if they exists
 
           // We only want to run remaining transitions in the end if they exists
 
           if (el.__x_remaining_transitions) {
 
           if (el.__x_remaining_transitions) {
 
             el.__x_remaining_transitions();
 
             el.__x_remaining_transitions();
 
@@ -647,7 +652,7 @@
 
 
 
   function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
 
   function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
 
     // Resolve any previous pending transitions before starting a new one
 
     // Resolve any previous pending transitions before starting a new one
 
-    if (el.__x_remaining_transitions) {
 
+    if (el.__x_remaining_transitions && el.__x_current_transition_value !== value) {
 
       el.__x_remaining_transitions();
 
       el.__x_remaining_transitions();
 
     }
 
     }
 
 
 
@@ -694,11 +699,14 @@
 
           transitionIn(el, () => {
 
           transitionIn(el, () => {
 
             show();
 
             show();
 
           }, component);
 
           }, component);
 
-        } // Resolve immediately, only hold up parent `x-show`s for hidin.
 
+        } // Resolve immediately, only hold up parent `x-show`s for hiding.
 
 
 
 
 
         resolve(() => {});
 
         resolve(() => {});
 
-      }
 
+      } // Asign current value to el to check later on for preventing transition overlaps
 
+
 
+
 
+      el.__x_current_transition_value = value;
 
     }; // The working of x-show is a bit complex because we need to
 
     }; // The working of x-show is a bit complex because we need to
 
     // wait for any child transitions to finish before hiding
 
     // wait for any child transitions to finish before hiding
 
     // some element. Also, this has to be done recursively.
 
     // some element. Also, this has to be done recursively.
 
@@ -715,10 +723,13 @@
 
 
 
     if (component.showDirectiveLastElement && !component.showDirectiveLastElement.contains(el)) {
 
     if (component.showDirectiveLastElement && !component.showDirectiveLastElement.contains(el)) {
 
       component.executeAndClearRemainingShowDirectiveStack();
 
       component.executeAndClearRemainingShowDirectiveStack();
 
-    } // We'll push the handler onto a stack to be handled later.
 
+    } // If x-show value changed from previous transition we'll push the handler onto a stack to be handled later.
 
 
 
 
 
-    component.showDirectiveStack.push(handle);
 
+    if (el.__x_current_transition_value !== value) {
 
+      component.showDirectiveStack.push(handle);
 
+    }
 
+
 
     component.showDirectiveLastElement = el;
 
     component.showDirectiveLastElement = el;
 
   }
 
   }

+ 6 - 0
examples/index.html
View File 

@@ -38,6 +38,12 @@
 
         <script src="/dist/alpine.js" defer></script>
 
         <script src="/dist/alpine.js" defer></script>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
+        <div x-data="{open: false, foo: ''}">
 
+            <div x-show.transition.duration.5000="open">test</div>
 
+            <button @click="open = !open">toggle</button>
 
+            <div x-text="open"></div>
 
+            <input x-model="foo">
 
+          </div>
 
         <table>
 
         <table>
 
             <thead>
 
             <thead>
 
                 <tr>
 
                 <tr>

+ 9 - 4
src/directives/show.js
View File 

@@ -2,7 +2,7 @@ import { transitionIn, transitionOut } from '../utils'
 
 
 
 export function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
 
 export function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
 
     // Resolve any previous pending transitions before starting a new one
 
     // Resolve any previous pending transitions before starting a new one
 
-    if (el.__x_remaining_transitions) {
 
+    if (el.__x_remaining_transitions && el.__x_current_transition_value !== value) {
 
         el.__x_remaining_transitions()
 
         el.__x_remaining_transitions()
 
     }
 
     }
 
 
 
@@ -50,9 +50,12 @@ export function handleShowDirective(component, el, value, modifiers, initialUpda
 
                 }, component)
 
                 }, component)
 
             }
 
             }
 
 
 
-            // Resolve immediately, only hold up parent `x-show`s for hidin.
 
+            // Resolve immediately, only hold up parent `x-show`s for hiding.
 
             resolve(() => {})
 
             resolve(() => {})
 
         }
 
         }
 
+
 
+        // Asign current value to el to check later on for preventing transition overlaps
 
+        el.__x_current_transition_value = value
 
     }
 
     }
 
 
 
     // The working of x-show is a bit complex because we need to
 
     // The working of x-show is a bit complex because we need to
 
@@ -72,8 +75,10 @@ export function handleShowDirective(component, el, value, modifiers, initialUpda
 
         component.executeAndClearRemainingShowDirectiveStack()
 
         component.executeAndClearRemainingShowDirectiveStack()
 
     }
 
     }
 
 
 
-    // We'll push the handler onto a stack to be handled later.
 
-    component.showDirectiveStack.push(handle)
 
+    // If x-show value changed from previous transition we'll push the handler onto a stack to be handled later.
 
+    if (el.__x_current_transition_value !== value) {
 
+        component.showDirectiveStack.push(handle)
 
+    }
 
 
 
     component.showDirectiveLastElement = el
 
     component.showDirectiveLastElement = el
 
 }
 
 }

+ 6 - 2
src/utils.js
View File 

@@ -179,6 +179,7 @@ export function transitionIn(el, show, component, forceSkip = false) {
 
 }
 
 }
 
 
 
 export function transitionOut(el, hide, component, forceSkip = false) {
 
 export function transitionOut(el, hide, component, forceSkip = false) {
 
+     // We don't want to transition on the initial page load.
 
     if (forceSkip) return hide()
 
     if (forceSkip) return hide()
 
 
 
     const attrs = getXAttrs(el, component, 'transition')
 
     const attrs = getXAttrs(el, component, 'transition')
 
@@ -398,7 +399,7 @@ export function transition(el, stages) {
 
             stages.end()
 
             stages.end()
 
 
 
             // Asign current transition to el in case we need to force it
 
             // Asign current transition to el in case we need to force it
 
-            el.__x_remaining_transitions = () => {
 
+            el.__x_remaining_transitions =() => {
 
 
 
                 stages.hide()
 
                 stages.hide()
 
 
 
@@ -410,9 +411,12 @@ export function transition(el, stages) {
 
 
 
                 // Safe to remove transition from el since it is completed
 
                 // Safe to remove transition from el since it is completed
 
                 delete el.__x_remaining_transitions
 
                 delete el.__x_remaining_transitions
 
+                if(el.__x_transition_timer){
 
+                    clearTimeout(el.__x_transition_timer)
 
+                }
 
             }
 
             }
 
 
 
-            setTimeout(() => {
 
+            el.__x_transition_timer = setTimeout(() => {
 
                 // We only want to run remaining transitions in the end if they exists
 
                 // We only want to run remaining transitions in the end if they exists
 
                 if (el.__x_remaining_transitions) {
 
                 if (el.__x_remaining_transitions) {
 
                     el.__x_remaining_transitions()
 
                     el.__x_remaining_transitions()