From 8280adb901b9d15cc1bc18009553aae8746121d8 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 3 Dec 2024 22:41:28 +0800
Subject: [PATCH] fix(toc): resume fade up animation in desktop mode (#2085)

---
 _includes/toc.html                                | 2 +-
 _javascript/modules/components/toc/toc-desktop.js | 5 ++++-
 _sass/pages/_post.scss                            | 5 +----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/_includes/toc.html b/_includes/toc.html
index 883bf135d55..4dccb2a6cf7 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -2,7 +2,7 @@
 
 {% if enable_toc %}
   <div class="toc-border-cover z-3"></div>
-  <section id="toc-wrapper" class="position-sticky ps-0 pe-4">
+  <section id="toc-wrapper" class="invisible position-sticky ps-0 pe-4">
     <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
diff --git a/_javascript/modules/components/toc/toc-desktop.js b/_javascript/modules/components/toc/toc-desktop.js
index 5021a72a082..0aaba48fcc7 100644
--- a/_javascript/modules/components/toc/toc-desktop.js
+++ b/_javascript/modules/components/toc/toc-desktop.js
@@ -15,8 +15,11 @@ export class TocDesktop {
   }
 
   static init() {
-    if (document.getElementById('toc-wrapper')) {
+    const $tocWrapper = document.getElementById('toc-wrapper');
+
+    if ($tocWrapper) {
       tocbot.init(this.options);
+      $tocWrapper.classList.remove('invisible');
     }
   }
 }
diff --git a/_sass/pages/_post.scss b/_sass/pages/_post.scss
index 19adf3fa66e..caa2fe6ece2 100644
--- a/_sass/pages/_post.scss
+++ b/_sass/pages/_post.scss
@@ -234,14 +234,11 @@ header {
 @keyframes fade-up {
   from {
     opacity: 0;
-    position: relative;
-    top: 2rem;
+    margin-top: 4rem;
   }
 
   to {
     opacity: 1;
-    position: relative;
-    top: 0;
   }
 }