From 3fdeebf0bb677755a515dcb75ff8f0527be67d68 Mon Sep 17 00:00:00 2001
From: Harm Kube <h.kube@tu-braunschweig.de>
Date: Sat, 12 Feb 2022 17:44:59 +0100
Subject: [PATCH] Sliding animation now working
---
display/display.css | 2 --
display/overlays/neighbors.js | 25 ++++++++++++++++---------
2 files changed, 16 insertions(+), 11 deletions(-)
diff --git a/display/display.css b/display/display.css
index fd108bd..f6f20af 100644
--- a/display/display.css
+++ b/display/display.css
@@ -341,8 +341,6 @@
display: none;
background-color: #ffffff;
flex-direction: column;
- height: 0;
- transition: height 0.25s ease-out;
overflow: hidden;
}
diff --git a/display/overlays/neighbors.js b/display/overlays/neighbors.js
index 4e96e98..0bb0a87 100644
--- a/display/overlays/neighbors.js
+++ b/display/overlays/neighbors.js
@@ -49,15 +49,18 @@ class NodeNeighborOverlay {
contentTabs.style.display = "flex";
coll.addEventListener("click", function() {
if(contentTabs.style.display === "flex") {
- contentTabs.style.display = "none";
+ jQuery(contentTabs).slideUp("fast");
} else {
- contentTabs.style.display = "flex";
+ jQuery(contentTabs).slideDown({
+ start: function () {
+ jQuery(this).css({
+ display: "flex"
+ })
+ }
+ });
}
});
- const slideDown = elem => elem.style.height = `${elem.scrollHeight}px`;
- const slideUp = elem => elem.style.height = '0';
-
const colors =
this.type === "link"
? this.graph.edgeColors
@@ -105,13 +108,17 @@ class NodeNeighborOverlay {
this.tabContentPages[cls] = collTabContent;
collTab.addEventListener("click", function() {
if(collTabContent.style.display === "flex") {
- slideUp(collTabContent);
- collTabContent.style.display = "none";
+ jQuery(collTabContent).slideUp("fast");
openMarkerTabs.innerText = '+';
} else {
- collTabContent.style.display = "flex";
+ jQuery(collTabContent).slideDown({
+ start: function () {
+ jQuery(this).css({
+ display: "flex"
+ })
+ }
+ });
openMarkerTabs.innerText = '-';
- slideDown(collTabContent);
}
});
}
--
GitLab