Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
oleg
/
alpine
zrkadlo https://github.com/alpinejs/alpine.git
1
0
Fork 0
Súbory Issues 0 Wiki
Prechádzať zdrojové kódy

Fix issue and remove transition examples

Caleb Porzio 5 rokov pred
rodič
d157b04fc1
commit
0bc6dcd375
5 zmenil súbory, kde vykonal 25 pridanie a 87 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 0 0
      dist/alpine.js
  2. 0 0
      dist/alpine.js.map
  3. 24 0
      examples/index.html
  4. 0 86
      examples/transition.html
  5. 1 1
      src/directives/show.js

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 0 - 0
dist/alpine.js


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 0 - 0
dist/alpine.js.map


+ 24 - 0
examples/index.html
Zobraziť súbor 

@@ -304,6 +304,30 @@
 
                     </td>
 
                 </tr>
 
 
+                <tr>
 
+                    <td>Nested Transitions (with x-show)</td>
 
+                    <td>
 
+                        <div x-data="{ open: false }">
 
+                            <button x-on:click="open= ! open">
 
+                                Open Modal
 
+                            </button>
 
+
 
+                            <div x-show="open">
 
+                                I shouldn't leave until the transition finishes.
 
+                                <div x-show="open"
 
+                                    x-transition:enter-start="opacity-0 scale-90"
 
+                                    x-transition:enter="ease-out transition-slow"
 
+                                    x-transition:enter-end="opacity-100 scale-100"
 
+                                    x-transition:leave-start="opacity-100 scale-100"
 
+                                    x-transition:leave="ease-in transition-slow"
 
+                                    x-transition:leave-end="opacity-0 scale-90">
 
+                                        I'm transitioning
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
                 <tr>
 
                     <td>Init function callback access refs and mutate data</td>
 
                     <td>

+ 0 - 86
examples/transition.html
Zobraziť súbor 

@@ -1,86 +0,0 @@
 
-<html>
 
-    <head>
 
-        <style>
 
-            .hidden { display: none; }
 
-            [x-cloak] { display: none; }
 
-            .opacity-0 { opacity: 0; }
 
-            .opacity-100 { opacity: 1; }
 
-            .transition-slow { transition-duration: 3000ms; }
 
-            .transition-medium { transition-duration: 2000ms; }
 
-            .transition-fast { transition-duration: 1000ms; }
 
-            .scale-90 { transform: scale(0.9); }
 
-            .scale-100 { transform: scale(1); }
 
-            .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
 
-            .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
 
-        </style>
 
-        <script src="/dist/alpine.js" defer></script>
 
-    </head>
 
-    <body>
 
-        <div x-data="{ open: false }">
 
-                <div x-show.immediate="open">
 
-                    dog
 
-                    <div x-show="open"
 
-                        x-transition:enter-start="opacity-0 scale-90"
 
-                        x-transition:enter="ease-in transition-slow"
 
-                        x-transition:enter-end="opacity-100 scale-100"
 
-                        x-transition:leave-start="opacity-100 scale-100"
 
-                        x-transition:leave="ease-out transition-slow"
 
-                        x-transition:leave-end="opacity-0 scale-90"
 
-                    >
 
-                        first
 
-                        <div x-show="open"
 
-                        x-transition:enter-start="opacity-0 scale-90"
 
-                        x-transition:enter="ease-in transition-medium"
 
-                        x-transition:enter-end="opacity-100 scale-100"
 
-                        x-transition:leave-start="opacity-100 scale-100"
 
-                        x-transition:leave="ease-out transition-medium"
 
-                        x-transition:leave-end="opacity-0 scale-90"
 
-                    >
 
-                        second
 
-                    </div>
 
-                    </div>
 
-                </div>
 
-                    <!-- <div x-show="open"
 
-                        x-transition:leave-start="opacity-100 scale-100"
 
-                        x-transition:leave="ease-in transition-medium"
 
-                        x-transition:leave-end="opacity-0 scale-90"
 
-                    >
 
-                        second
 
-                        <div x-show="open"
 
-                            x-transition:leave-start="opacity-100 scale-100"
 
-                            x-transition:leave="ease-in transition-fast"
 
-                            x-transition:leave-end="opacity-0 scale-90"
 
-                        >
 
-                            third
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-            <div x-show="open">
 
-                main
 
-                <div x-show="open"
 
-                    x-transition:leave-start="opacity-100 scale-100"
 
-                    x-transition:leave="ease-in transition-fast"
 
-                    x-transition:leave-end="opacity-0 scale-90"
 
-                >
 
-                    first
 
-                    <div x-show="open"
 
-                        x-transition:leave-start="opacity-100 scale-100"
 
-                        x-transition:leave="ease-in transition-medium"
 
-                        x-transition:leave-end="opacity-0 scale-90"
 
-                    >
 
-                        second
 
-                        <div x-show="open"
 
-                            x-transition:leave-start="opacity-100 scale-100"
 
-                            x-transition:leave="ease-in transition-fast"
 
-                            x-transition:leave-end="opacity-0 scale-90"
 
-                        >
 
-                            third
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div> -->
 
-                <button @click="open = ! open">toggle</button>
 
-        </div>
 
-    </body>
 
-</html>

+ 1 - 1
src/directives/show.js
Zobraziť súbor 

@@ -43,7 +43,7 @@ export function handleShowDirective(component, el, value, modifiers, initialUpda
 
     // we encounter is NOT a child of another x-show element we
 
     // can execute the previous x-show stack (if one exists).
 
     if (component.showDirectiveLastElement && ! component.showDirectiveLastElement.contains(el)) {
 
-        component.executeAndClearRemainingShowDirectiveCallbacks()
 
+        component.executeAndClearRemainingShowDirectiveStack()
 
     }
 
 
     // We'll push the handler onto a stack to be handled later.

Niektoré súbory nie sú zobrazené, pretože je v týchto rozdielových dátach zmenené mnoho súborov