Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
oleg
/
alpine
kopia lustrzana https://github.com/alpinejs/alpine.git
1
0
Forkuj 0
Pliki Problemy 0 Wiki
Przeglądaj źródła

Allow dynamic transition classes

Caleb Porzio 3 lat temu
rodzic
73d90a8433
commit
0d2237cd30
2 zmienionych plików z 20 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 2 0
      packages/alpinejs/src/directives/x-transition.js
  2. 18 0
      tests/cypress/manual-transition-test.html

+ 2 - 0
packages/alpinejs/src/directives/x-transition.js
Wyświetl plik 

@@ -6,6 +6,8 @@ import { mutateDom } from '../mutation'
 
 import { once } from '../utils/once'
 
 
 directive('transition', (el, { value, modifiers, expression }) => {
 
+    if (typeof expression === 'function') expression = expression()
 
+
 
     if (! expression) {
 
         registerTransitionsFromHelper(el, modifiers, value)
 
     } else {

+ 18 - 0
tests/cypress/manual-transition-test.html
Wyświetl plik 

@@ -1,5 +1,6 @@
 
 <html>
 
     <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
 
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 
 
     <table>
 
         <tr>
 
@@ -32,6 +33,23 @@
 
             </td>
 
         </tr>
 
 
+        <tr>
 
+            <td><code>x-transition with dynamic classes</code></td>
 
+            <td>
 
+                <div x-data="{ open: false, props: {
 
+                    ['x-transition:enter']() { return `transition ease-out duration-300`; },
 
+                    ['x-transition:enter-start']() { return `opacity-0 transform scale-90`; },
 
+                    ['x-transition:enter-end']() { return `opacity-100 transform scale-100`; },
 
+                    ['x-transition:leave']() { return `transition ease-in duration-300`; },
 
+                    ['x-transition:leave-start']() { return `opacity-100 transform scale-100`; },
 
+                    ['x-transition:leave-end']() { return `opacity-0 transform scale-90`; },
 
+                 }}">
 
+                    <button @click="open = !open">Toggle</button>
 
+                    <div x-bind="props" x-show="open">Hello 👋</div>
 
+                </div>
 
+            </td>
 
+        </tr>
 
+
 
         <tr>
 
             <td><code>x-transition</code></td>
 
             <td>