fix(toc): resume fade up animation in desktop mode (#2085)

cotes2020 · Dec 3, 2024 · 8280adb · 8280adb
1 parent 4180992
commit 8280adb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
   }
 }