Use CSS transitions to animate site-nav (#223)

source/css/_common/outline/header/site-nav.styl

@@ -19,10 +19,6 @@
 
 .site-nav {
   +mobile() {
-    display: none;
+    site-nav-hide-by-default();
-  }
-
-  .site-nav-on & {
-    display: block;
   }
 }

source/css/_mixins.styl

@@ -219,3 +219,18 @@ toggle-close($position) {
     }
   }
 }
+
+site-nav-hide-by-default() {
+  --scroll-height: 0;
+  height: 0;
+  overflow: hidden;
+  transition: height $transition-ease;
+
+  body:not(.site-nav-on) & .animated {
+    animation: none;
+  }
+
+  body.site-nav-on & {
+    height: var(--scroll-height);
+  }
+}

source/css/_schemes/Pisces/_menu.styl

@@ -1,6 +1,6 @@
 .site-nav {
   +tablet() {
-    display: none;
+    site-nav-hide-by-default();
   }
 }
 

source/js/next-boot.js

@@ -12,35 +12,8 @@ NexT.boot.registerEvents = function() {
     event.currentTarget.classList.toggle('toggle-close');
     const siteNav = document.querySelector('.site-nav');
     if (!siteNav) return;
-    const animateAction = document.body.classList.contains('site-nav-on');
+    siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px');
-    const height = NexT.utils.getComputedStyle(siteNav);
+    document.body.classList.toggle('site-nav-on');
-    siteNav.style.height = animateAction ? height : 0;
-    const toggle = () => document.body.classList.toggle('site-nav-on');
-    const begin = () => {
-      siteNav.style.overflow = 'hidden';
-    };
-    const complete = () => {
-      siteNav.style.overflow = '';
-      siteNav.style.height = '';
-    };
-    window.anime(Object.assign({
-      targets : siteNav,
-      duration: 200,
-      height  : animateAction ? [height, 0] : [0, height],
-      easing  : 'linear'
-    }, animateAction ? {
-      begin,
-      complete: () => {
-        complete();
-        toggle();
-      }
-    } : {
-      begin: () => {
-        begin();
-        toggle();
-      },
-      complete
-    }));
   });
 
   const duration = 200;

source/js/utils.js

@@ -290,17 +290,6 @@ NexT.utils = {
     });
   },
 
-  getComputedStyle: function(element) {
-    const clone = element.cloneNode(true);
-    clone.style.position = 'absolute';
-    clone.style.visibility = 'hidden';
-    clone.style.display = 'block';
-    element.parentNode.appendChild(clone);
-    const height = clone.clientHeight;
-    element.parentNode.removeChild(clone);
-    return height;
-  },
-
   /**
    * Init Sidebar & TOC inner dimensions on all pages and for all schemes.
    * Need for Sidebar/TOC inner scrolling if content taller then viewport.