Startseite Erkunden Hilfe
Registrieren Anmelden
oleg
/
alpine
Mirror von https://github.com/alpinejs/alpine.git
1
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

Allow dynamic transition classes (#1785)

* Allow dynamic transition classes

* Evaluate expression in the context of the element
Caleb Porzio vor 4 Jahren
Ursprung
73d90a8433
Commit
0cdcaa5738
2 geänderte Dateien mit 21 neuen und 1 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 3 1
      packages/alpinejs/src/directives/x-transition.js
  2. 18 0
      tests/cypress/manual-transition-test.html

+ 3 - 1
packages/alpinejs/src/directives/x-transition.js
Datei anzeigen 

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

+ 18 - 0
tests/cypress/manual-transition-test.html
Datei anzeigen 

@@ -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>