Merge pull request #767 from perl6/animated_css

Css-based TOC animation

Author: Altai-man

assets/sass/style.scss

@@ -554,3 +554,20 @@ 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 */
+  transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
+
+}
+
+/* reveal TOC */
+.shownTOC {
+    /* unshrink, then fade in */
+    transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
+}

html/js/main.js

@@ -39,7 +39,9 @@ function setup_collapsible_TOC() {
 
     state = Cookies.get('toc_state') || 'shown';
     if ( state == 'hidden' ) {
-        $('nav.indexgroup > ol').hide();
+        $('#TOC').find('tbody').addClass('hiddenTOC');
+    } else {
+        $('#TOC').find('tbody').addClass('shownTOC');
     }
 
     $('nav.indexgroup').find('#TOC_Title')
@@ -51,17 +53,9 @@ function setup_collapsible_TOC() {
         .find('#TOC_toggle_button')
             .click(function() {
                 var el = $(this);
-                if (el.text() == '[hide]') {
-                    Cookies.set('toc_state', 'hidden');
-                    el.parents('nav').find('tbody').slideUp();
-                    el.text('[show]');
-                }
-                else {
-                    Cookies.set('toc_state', 'shown');
-                    el.parents('nav').find('tbody').slideDown();
-                    el.text('[hide]');
-                }
-
+                el.text(el.text() == '[hide]' ? '[show]' : '[hide]');
+                Cookies.set('toc_state', el.text() == '[hide]' ? 'shown' : 'hidden');
+                el.parents('nav').find('tbody').toggleClass('hiddenTOC').toggleClass('shownTOC');
                 return false;
             });
 }