add animation

hazelcast · Aug 19, 2024 · 214c7cd · 214c7cd
1 parent 7c5136a
commit 214c7cd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 36 deletions.
diff --git a/src/css/nav.css b/src/css/nav.css
@@ -2,7 +2,7 @@
 .nav-container {
   --nav-x-padding: 10px;
   --nav-item-padding-left: 14px;
-  --nav-line-left: 5px;
+  --nav-transition-duration: 300ms;
 
   position: fixed;
   margin-top: 30px;
@@ -50,6 +50,7 @@
   top: 0;
   height: var(--nav-height);
   overflow-y: auto;
+  overflow-x: hidden;
   width: 100%;
 }
 
@@ -92,6 +93,16 @@ html.is-clipped--nav {
 .nav-list {
   padding: 0;
   position: relative;
+  height: 0;
+  overflow: hidden;
+  will-change: height;
+  transition: height var(--nav-transition-duration);
+}
+
+.nav-menu > .nav-list {
+  padding: 0;
+  margin-top: 0;
+  height: auto;
 }
 
 .nav-item {
@@ -115,36 +126,6 @@ html.is-clipped--nav {
   font-weight: 400;
 }
 
-.nav-item > .nav-list::before {
-  content: '';
-  position: absolute;
-  width: 1px;
-  background-color: var(--neutral-light);
-  left: var(--nav-line-left);
-  top: 0;
-  bottom: 0;
-}
-
-.nav-item[data-depth="0"] .nav-item.is-active:not(.is-current-page) > .nav-link::before,
-.nav-item[data-depth="0"] .nav-item.is-active:not(.is-current-page) > .nav-text::before {
-  --nav-line-dot-width: 5px;
-
-  content: '';
-  position: absolute;
-  width: var(--nav-line-dot-width);
-  height: var(--nav-line-dot-width);
-  border-radius: 50%;
-  background-color: var(--accent);
-  left: calc((-1 * var(--nav-item-padding-left)) + (var(--nav-line-dot-width) / 2));
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.nav-menu > .nav-list {
-  padding: 0;
-  margin-top: 0;
-}
-
 .nav-item > .nav-text {
   cursor: pointer;
 }
@@ -153,10 +134,6 @@ html.is-clipped--nav {
   background: #fff;
 }
 
-.nav-item:not(.is-active) > .nav-list {
-  display: none;
-}
-
 .components:not(.is-active),
 .versions:not(.is-active) {
   display: none;
@@ -165,13 +142,14 @@ html.is-clipped--nav {
 .nav-item-toggle {
   background: transparent url(../img/caret-blue.svg) center no-repeat;
   transform: rotate(-90deg);
+  transition: transform var(--nav-transition-duration);
   border: none;
   outline: none;
   line-height: inherit;
   position: absolute;
   height: calc(var(--nav-line-height) * 1em);
   width: 30px;
-  padding: 0 5px;
+  padding: 0;
 }
 
 .nav-item[data-depth="0"] > .nav-item-toggle {

diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -3,6 +3,7 @@
   var SECT_CLASS_RX = /^sect(\d)$/
   const VERSION_PICKER_ACTIVE_TOGGLE_NAME = 'data-active-toggle'
   const VERSION_PICKER_TOGGLE_NAME = 'data-toggle-value'
+  let currentNavToggleTimer = 0
 
   function versionPickerToggleHandler () {
     const value = this.getAttribute(VERSION_PICKER_TOGGLE_NAME)
@@ -127,7 +128,29 @@
     }
 
     function toggleActive () {
+      clearTimeout(currentNavToggleTimer)
+
       this.classList.toggle('is-active')
+
+      if (this.classList.contains('is-active')) {
+        const list = this.querySelector('.nav-list')
+        const height = list.scrollHeight
+        list.style.height = `${height}px`
+
+        // to support resizing
+        currentNavToggleTimer = setTimeout(() => {
+          if (this.classList.contains('is-active')) {
+            list.style.height = 'auto'
+          }
+        }, 300)
+      } else {
+        const list = this.querySelector('.nav-list')
+        const height = list.scrollHeight
+        list.style.height = `${height}px`
+        currentNavToggleTimer = setTimeout(() => {
+          this.querySelector('.nav-list').style.height = ''
+        }, 0)
+      }
     }
 
     function showNav (e) {