홈 탐색 도움말
가입하기 로그인
oleg
/
alpine
의 미러 https://github.com/alpinejs/alpine.git
1
0
포크 0
파일 이슈 0 위키
소스 검색

Fix issue and remove transition examples

Caleb Porzio 5 년 전
부모
d157b04fc1
커밋
0bc6dcd375
5개의 변경된 파일과 25개의 추가작업 그리고 87개의 파일을 삭제
통합 보기 변경상태 보기
  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

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/alpine.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
dist/alpine.js.map


+ 24 - 0
examples/index.html
파일 보기 

@@ -304,6 +304,30 @@
 
                     </td>
 
                     </td>
 
                 </tr>
 
                 </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>
 
                 <tr>
 
                     <td>Init function callback access refs and mutate data</td>
 
                     <td>Init function callback access refs and mutate data</td>
 
                     <td>
 
                     <td>

+ 0 - 86
examples/transition.html
파일 보기 

@@ -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
파일 보기 

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

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.