From 3a16525c27517cd046b383f5fd92d07be6b6d798 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Fri, 29 Aug 2025 15:21:15 +0800
Subject: feat: comment toggle animation

---
 layouts/_partials/posts/action-menu.html      |   6 +-
 layouts/_partials/posts/comment.html          | 117 +++++++++++++-------------
 layouts/_partials/scripts/action-menu-js.html |  28 ++++--
 3 files changed, 84 insertions(+), 67 deletions(-)

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index 5f79ad98..63c7ba5c 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -37,8 +37,10 @@
   </div>
 
   <!-- 评论区域 -->
-  <div class="mt-4" id="comments-section" style="display: none;">
-    {{ partial "posts/comment.html" . }}
+  <div class="overflow-hidden my-4">
+      <div class="mt-4 hidden animate-duration-200" id="comments-section">
+        {{ partial "posts/comment.html" . }}
+      </div>
   </div>
 </div>
 
diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index af0def7e..6e178e5e 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -1,66 +1,67 @@
-<div class="post-comments">
-    {{ with .Params.comments }}
-    <!-- Static Comments -->
-    <div class="my-8">
-        <p class="text-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
-        {{ range . }}
-            <div class="text-xl border-b border-solid border-[#ccc] py-4 px-1">
-                <div class="mb-4 flex justify-between">
-                    <span class="font-bold">{{ .name }}</span>
-                    <span class="text-secondary">{{ .date }}</span>
-                </div>
-                <div>
-                    {{ .content | safeHTML }}
-                </div>
-                <div class="text-4 text-right text-secondary">
-                    {{ with .source }}
-                    <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
-                    {{ end }}
-                </div>
+{{ with .Params.comments }}
+<!-- Static Comments -->
+<div class="my-8">
+    <p class="text-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
+    {{ range . }}
+        <div class="text-xl border-b border-solid border-[#ccc] py-4 px-1">
+            <div class="mb-4 flex justify-between">
+                <span class="font-bold">{{ .name }}</span>
+                <span class="text-secondary">{{ .date }}</span>
             </div>
-        {{ end }}
-    </div>
+            <div>
+                {{ .content | safeHTML }}
+            </div>
+            <div class="text-4 text-right text-secondary">
+                {{ with .source }}
+                <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
+                {{ end }}
+            </div>
+        </div>
     {{ end }}
+</div>
+{{ end }}
+
+<!-- email info -->
+<p class="text-size-sm text-secondary">
+    *{{ T "emailMe" }} <a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a>
+</p>
 
-    <p class="mt-4 text-size-sm text-secondary">
-        *{{ T "emailMe" }} <a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a>
+<!-- giscus container -->
+<div class="giscus">
+    <p style="text-align:center">
+        {{ T "postPage.commentNotLoaded" }}
     </p>
-    <div class="giscus mb-4">
-        <p style="text-align:center">
-            {{ T "postPage.commentNotLoaded" }}
-        </p>
-    </div>
+</div>
 
-    <!-- giscus script -->
-    <script>
-    function loadGiscus() {
-      if (document.querySelector('iframe.giscus-frame')) return; // 防止重复加载
+<!-- giscus script -->
+<script>
+function loadGiscus() {
+    if (document.querySelector('iframe.giscus-frame')) return; // 防止重复加载
 
-      const script = document.createElement("script");
-      script.src = "https://giscus.app/client.js";
-      script.setAttribute("data-repo", "{{ .Site.Params.giscus.repo }}");
-      script.setAttribute("data-repo-id", "{{ .Site.Params.giscus.repoId }}");
-      script.setAttribute("data-category", "{{ .Site.Params.giscus.category }}");
-      script.setAttribute("data-category-id", "{{ .Site.Params.giscus.categoryId }}");
-      script.setAttribute("data-mapping", "{{ .Site.Params.giscus.mapping }}");
-      script.setAttribute("data-strict", "{{ .Site.Params.giscus.strict }}");
-      script.setAttribute("data-reactions-enabled", "{{ .Site.Params.giscus.reactionsEnabled }}");
-      script.setAttribute("data-emit-metadata", "1");
-      script.setAttribute("data-input-position", "{{ .Site.Params.giscus.inputPosition }}");
-      script.setAttribute("data-theme", "{{ .Site.Params.giscus.theme }}");
-      script.setAttribute("data-lang", "{{ T "lang" }}");
-      script.setAttribute("crossorigin", "anonymous");
-      script.async = true;
-      document.body.appendChild(script);
-    }
+    const script = document.createElement("script");
+    script.src = "https://giscus.app/client.js";
+    script.setAttribute("data-repo", "{{ .Site.Params.giscus.repo }}");
+    script.setAttribute("data-repo-id", "{{ .Site.Params.giscus.repoId }}");
+    script.setAttribute("data-category", "{{ .Site.Params.giscus.category }}");
+    script.setAttribute("data-category-id", "{{ .Site.Params.giscus.categoryId }}");
+    script.setAttribute("data-mapping", "{{ .Site.Params.giscus.mapping }}");
+    script.setAttribute("data-strict", "{{ .Site.Params.giscus.strict }}");
+    script.setAttribute("data-reactions-enabled", "{{ .Site.Params.giscus.reactionsEnabled }}");
+    script.setAttribute("data-emit-metadata", "1");
+    script.setAttribute("data-input-position", "{{ .Site.Params.giscus.inputPosition }}");
+    script.setAttribute("data-theme", "{{ .Site.Params.giscus.theme }}");
+    script.setAttribute("data-lang", "{{ T "lang" }}");
+    script.setAttribute("crossorigin", "anonymous");
+    script.async = true;
+    document.body.appendChild(script);
+}
 
-    const observer = new IntersectionObserver((entries, obs) => {
-      if (entries[0].isIntersecting) {
-        loadGiscus();
-        obs.disconnect();
-      }
-    });
+const observer = new IntersectionObserver((entries, obs) => {
+    if (entries[0].isIntersecting) {
+    loadGiscus();
+    obs.disconnect();
+    }
+});
 
-    observer.observe(document.getElementById("action-menu"));
-    </script>
-</div>
+observer.observe(document.getElementById("action-menu"));
+</script>
diff --git a/layouts/_partials/scripts/action-menu-js.html b/layouts/_partials/scripts/action-menu-js.html
index e2db17e7..a0d9391d 100644
--- a/layouts/_partials/scripts/action-menu-js.html
+++ b/layouts/_partials/scripts/action-menu-js.html
@@ -28,13 +28,27 @@ function initializeComments() {
   const commentsToggle = document.getElementById('comments-toggle');
   const commentsSection = document.getElementById('comments-section');
 
-  if (commentsToggle && commentsSection) {
-    commentsToggle.addEventListener('click', function() {
-      const isHidden = commentsSection.style.display === 'none';
-      commentsSection.style.display = isHidden ? 'block' : 'none';
-      this.style.background = isHidden ? 'rgba(0, 0, 0, 0.1)' : 'transparent';
-    });
-  }
+  if (!commentsToggle || !commentsSection) return;
+
+  // click on toggle
+  commentsToggle.addEventListener('click', function() {
+    const isHidden = commentsSection.classList.contains('hidden');
+    const entranceAnimation = 'animate-slide-in-down';
+    const exitAnimation = 'animate-slide-out-up';
+
+    if (isHidden) {
+      // swtich on
+      commentsSection.classList.remove('hidden', exitAnimation);
+      commentsSection.classList.add(entranceAnimation);
+    } else {
+      // switch off
+      commentsSection.classList.remove(entranceAnimation);
+      commentsSection.classList.add(exitAnimation);
+      setTimeout(() => {
+        commentsSection.classList.add('hidden');
+      }, 200);
+    }
+  });
 }
 
 /**
-- 
cgit v1.2.3