refactor: replace _animation.scss with UnoCSS animates

5 files changed, 16 insertions, 25 deletions

diff --git a/assets/css/main.scss b/assets/css/main.scss
index 045a4655..dff08a6a 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1,7 +1,6 @@
 @import "utils/variables";
 @import "utils/reset";
 @import "utils/utility";
-@import "utils/animation";
 @import "markdown";
 
 @import "components/littlefoot";
diff --git a/assets/css/utils/_animation.scss b/assets/css/utils/_animation.scss
deleted file mode 100644
index 0361c5d0..00000000
--- a/assets/css/utils/_animation.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@keyframes fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(1rem);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes heartbeat {
-  0%, 100% { transform: scale(1); }
-  25% { transform: scale(1.1); }
-  50% { transform: scale(1.2); }
-  75% { transform: scale(1.1); }
-}
diff --git a/layouts/_partials/components/global-search.html b/layouts/_partials/components/global-search.html
index aa654306..674ecdcc 100644
--- a/layouts/_partials/components/global-search.html
+++ b/layouts/_partials/components/global-search.html
@@ -11,7 +11,6 @@
 #global-search.shown {
     z-index: 15!important;
     display: flex!important;
-    animation: fade-in 0.3s ease-in-out!important;
 }
 </style>
 
@@ -40,12 +39,14 @@
 
         const turnOn = () => {
           search.classList.add("shown");
+          search.classList.add("animation-fade-in");
           overlay.classList.add("shown");
 
           umami.track('🔍 Open search panel')
         };
         const turnOff = () => {
           search.classList.remove("shown");
+          search.classList.remove("animation-fade-in");
           overlay.classList.remove("shown");
         };
 
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index 1bd639e9..5d78d1ad 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -10,7 +10,9 @@
 
       <!-- 点赞按钮 -->
       <div class="relative" id="like-container-{{ .File.UniqueID | urlize }}">
-        <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
+        <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2
+            border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200
+            hover:bg-black/5 hover:rounded-lg group animate-count-infinite"
                 onclick="sendLike('{{ .File.UniqueID | urlize }}')"
                 id="like-btn-{{ .File.UniqueID | urlize }}"
                 title="为这篇文章献上心脏"
@@ -41,10 +43,6 @@
 </div>
 
 <style>
-.heartbeat {
-  animation: heartbeat 1.5s ease-in-out infinite;
-}
-
 .liked-heart {
   filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) !important;
 }
@@ -121,7 +119,7 @@ function initializeLikes(pageId) {
   }
 
   function setLikedState() {
-    elements.icon?.classList.add('liked-heart', 'heartbeat');
+    elements.icon?.classList.add('liked-heart', 'animate-heart-beat ');
     elements.count?.classList.add('liked-count');
     elements.btn.disabled = true;
     elements.container.classList.add('liked');
diff --git a/uno.config.js b/uno.config.js
index c7a6c1d8..55bc001c 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -28,6 +28,14 @@ export default defineConfig({
     fontFamily: {
       mono: ["Courier New", "Courier", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Lucida Console"],
       serif: ["Noto Serif", "Noto Serif SC", "serif"],
+    },
+    animation: {
+      kayframes: {
+        fadeIn: '{from { opacity: 0; transform: translateY(1rem); } to { opacity: 1;transform: translateY(0); }}'
+      },
+      counts: {
+        infinite: 'infinite'
+      }
     }
   },
   shortcuts: {
@@ -38,6 +46,8 @@ export default defineConfig({
     'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl',
     'text-base!',
 
+    'animate-heart-beat', 'animate-fade-in',
+
     ...range(10, i => `opacity-${i * 10}`),
     ...rangeWithPrefixes(5, 'rotate', ['', '-']),
     ...rangeWithPrefixes(30, 'w', ['', 'md:', 'lg:']),