소스 검색

Allow dynamic transition classes (#1785)

* Allow dynamic transition classes

* Evaluate expression in the context of the element
Caleb Porzio 4 년 전
부모
커밋
0cdcaa5738
2개의 변경된 파일21개의 추가작업 그리고 1개의 파일을 삭제
  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

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

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