From 019b7bca531a136b225926c1a289911dbb7b53b8 Mon Sep 17 00:00:00 2001
From: Harm Kube <h.kube@tu-braunschweig.de>
Date: Wed, 9 Feb 2022 19:04:15 +0100
Subject: [PATCH] Animation when opening sub-sections
---
display/display.css | 5 +++--
display/overlays/neighbors.js | 5 ++++-
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/display/display.css b/display/display.css
index 1d8819c..54b26f4 100644
--- a/display/display.css
+++ b/display/display.css
@@ -310,10 +310,11 @@
.neighbor-content-links {
padding: 5px;
display: none;
- overflow: hidden;
background-color: #ffffff;
flex-direction: column;
- overflow-x: auto;
+ height: 0;
+ transition: height 0.25s ease-out;
+ overflow: hidden;
}
.link-neighbor {
diff --git a/display/overlays/neighbors.js b/display/overlays/neighbors.js
index 51f49c2..d1a042c 100644
--- a/display/overlays/neighbors.js
+++ b/display/overlays/neighbors.js
@@ -64,7 +64,8 @@ class NodeNeighborOverlay {
}
});
-
+ const slideDown = elem => elem.style.height = `${elem.scrollHeight}px`;
+ const slideUp = elem => elem.style.height = '0';
const colors =
this.type === "link"
@@ -105,11 +106,13 @@ class NodeNeighborOverlay {
this.tabContentPages[cls] = collTabContent;
collTab.addEventListener("click", function() {
if(collTabContent.style.display === "flex") {
+ slideUp(collTabContent);
collTabContent.style.display = "none";
openMarkerTabs.innerText = '+';
} else {
collTabContent.style.display = "flex";
openMarkerTabs.innerText = '-';
+ slideDown(collTabContent);
}
});
}
--
GitLab