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

Author: cotes2020

_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>

_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');
     }
   }
 }

_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;
   }
 }