1 年之前 · 775ebdb4e9
--- a/dist/autoanimate.cdn.js
+++ b/dist/autoanimate.cdn.js
--- a/dist/autoanimate.cjs.js
+++ b/dist/autoanimate.cjs.js
--- a/dist/autoanimate.esm.js
+++ b/dist/autoanimate.esm.js
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 
															 {
														
 
															   "name": "alpinejs-autoanimate",
														
 
															-  "version": "1.1.0",
														
 
															+  "version": "1.2.0",
														
 
															   "description": "Minimal AlpineJS wrapper for @formkit/auto-animate",
														
 
															   "type": "module",
														
 
															   "keywords": [
														
@@ -32,10 +32,10 @@
 
															     "build": "node scripts/build.js"
														
 
															   },
														
 
															   "devDependencies": {
														
 
															-    "@babel/core": "^7.20.5",
														
 
															-    "@babel/preset-env": "^7.20.2",
														
 
															-    "@formkit/auto-animate": "^1.0.0-beta.5",
														
 
															-    "esbuild": "^0.16.1",
														
 
															+    "@babel/core": "^7.23.3",
														
 
															+    "@babel/preset-env": "^7.23.3",
														
 
															+    "@formkit/auto-animate": "^0.8.1",
														
 
															+    "esbuild": "^0.19.5",
														
 
															     "esbuild-plugin-babel": "^0.2.3"
														
 
															   }
														
 
															 }
														
--- a/test/index.html
+++ b/test/index.html
@@ -0,0 +1,43 @@
 
															+<!DOCTYPE html>
														
 
															+<html lang="en">
														
 
															+  <head>
														
 
															+    <meta charset="UTF-8" />
														
 
															+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
														
 
															+    <title>Autoanimate Test</title>
														
 
															+    <script src="https://cdn.tailwindcss.com"></script>
														
 
															+    <script defer src="../dist/autoanimate.cdn.js"></script>
														
 
															+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
														
 
															+  </head>
														
 
															+  <body>
														
 
															+    <script>
														
 
															+      const test = () => {
														
 
															+        return {
														
 
															+          items: ["First Item"],
														
 
															+          init() {
														
 
															+            // Add new timestamp to items every 500ms max 20 items
														
 
															+            setInterval(() => {
														
 
															+              if (this.items.length < 20) {
														
 
															+                this.items.push(Date.now());
														
 
															+              }
														
 
															+            }, 750);
														
 
															+            // Shuffles items every 2 seconds
														
 
															+            setTimeout(() => {
														
 
															+              setInterval(() => {
														
 
															+                this.items = this.items.sort(() => Math.random() - 0.5);
														
 
															+              }, 2000);
														
 
															+            }, 5000);
														
 
															+          },
														
 
															+        };
														
 
															+      };
														
 
															+    </script>
														
 
															+    <div>
														
 
															+      <div x-data="test" class="p-20">
														
 
															+        <div x-autoanimate class="grid grid-cols-4 gap-4 text-center">
														
 
															+          <template x-for="item in items" :key="item">
														
 
															+            <div class="p-4 bg-blue-300" x-text="item"></div>
														
 
															+          </template>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </body>
														
 
															+</html>