Css-based TOC animation

Author: Altai-man

assets/sass/style.scss

@@ -554,3 +554,28 @@ div.highlight span.c-Singleline, div.highlight span.c {
         }
     }
 }
+
+/* hide TOC */
+.hiddenTOC {
+  font-size: 0;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  /* fade out, then shrink */
+  -webkit-transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
+  -moz-transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
+  -o-transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
+  -ms-transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
+  transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
+
+}
+
+/* reveal TOC */
+.shownTOC {
+    /* unshrink, then fade in */
+    -webkit-transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
+    -moz-transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
+    -o-transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
+    -ms-transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
+    transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
+}

html/js/main.js

@@ -53,12 +53,14 @@ function setup_collapsible_TOC() {
                 var el = $(this);
                 if (el.text() == '[hide]') {
                     Cookies.set('toc_state', 'hidden');
-                    el.parents('nav').find('tbody').slideUp();
+                    el.parents('nav').find('tbody').removeClass('shownTOC');
+                    el.parents('nav').find('tbody').addClass('hiddenTOC');
                     el.text('[show]');
                 }
                 else {
                     Cookies.set('toc_state', 'shown');
-                    el.parents('nav').find('tbody').slideDown();
+                    el.parents('nav').find('tbody').removeClass('hiddenTOC');
+                    el.parents('nav').find('tbody').addClass('shownTOC');
                     el.text('[hide]');
                 }