✨ Add animation toggle (#1)

marcreichel · Oct 5, 2022 · ee32fa3 · ee32fa3
2 parents 7a18b45 + 4aed53b
commit ee32fa3
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,23 @@ To adjust the easing function add it as a modifier:
 </ul>
 ```
 
+### Toggle animations
+
+In some situations it may be necessary to disable animations and re-enable them later.
+
+For this you can provide a boolean to the directive like so:
+
+```html
+<div x-data="{ enabled: true }">
+    <ul x-auto-animate="enabled">
+        <!-- ... -->
+    </ul>
+    <button @click="enabled = !enabled" type="button">
+        Toggle animations
+    </button>
+</div>
+```
+
 ## Global config
 
 If you are using the `npm` installation method for this package or the ESM distribution, you can use the

diff --git a/dist/alpine-auto-animate.js b/dist/alpine-auto-animate.js
diff --git a/dist/alpine-auto-animate.js.map b/dist/alpine-auto-animate.js.map
diff --git a/dist/alpine-auto-animate.min.js b/dist/alpine-auto-animate.min.js
diff --git a/dist/alpine-auto-animate.min.js.map b/dist/alpine-auto-animate.min.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -31,15 +31,23 @@
     <script defer src="../dist/alpine-auto-animate.min.js"></script>
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
-<body x-data="{ todo: '', list: [], add() { this.list.push(this.todo); this.todo = ''; } }">
+<body x-data="{ todo: '', list: [], enabled: true, add() { this.list.push(this.todo); this.todo = ''; } }">
 <div>
-    <ul x-auto-animate.ease-in-out>
+    <ul x-auto-animate.ease-in-out="enabled">
         <template x-for="item in list">
             <li x-text="item"></li>
         </template>
     </ul>
     <input type="text" x-model="todo" placeholder="Todo ..." @keydown.enter="add()">
-    <button @click="add()">Add</button>
+    <button type="button" @click="add()">Add</button>
+    <button type="button" @click="enabled = !enabled">
+        <template x-if="enabled">
+            <span>🚫 Disable animations</span>
+        </template>
+        <template x-if="!enabled">
+            <span>✅ Enable animations</span>
+        </template>
+    </button>
 </div>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,7 @@ import autoAnimate from '@formkit/auto-animate';
 let autoAnimateConfig = {};
 
 function AutoAnimate(Alpine) {
-    Alpine.directive('auto-animate', (el, { expression, modifiers }, { evaluate }) => {
+    Alpine.directive('auto-animate', (el, { expression, modifiers }, { evaluateLater, effect }) => {
         let config = {};
         const durationModifier = modifiers.filter((modifier) => modifier.match(/^\d+m?s$/))[0] || null;
         if (durationModifier) {
@@ -15,7 +15,19 @@ function AutoAnimate(Alpine) {
         if (easingModifier) {
             config.easing = easingModifier;
         }
-        autoAnimate(el, { ...autoAnimateConfig, ...config });
+        const controller = autoAnimate(el, { ...autoAnimateConfig, ...config });
+        if (expression) {
+            const isEnabled = evaluateLater(expression);
+            effect(() => {
+                isEnabled((enabled) => {
+                    if (enabled) {
+                        controller.enable();
+                    } else {
+                        controller.disable();
+                    }
+                });
+            })
+        }
     });
 }