klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-06-08 20:25:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve accordion animation

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-06-05 20:37:58 +02:00
parent d58c713fc5
commit 4774a7b741
Signed by: klmp200
GPG Key ID: E7245548C53F904B
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
core/static/bundled/core/accordion-index.ts
View File

@ -1,11 +1,19 @@
const setMaxHeight = (element: HTMLDetailsElement) => { const updateMaxHeight = (element: HTMLDetailsElement) => {
element.setAttribute("style", `max-height: ${element.scrollHeight}px`); const content = element.querySelector(".accordion-content") as HTMLElement | null;
if (!content) {
return;
}
if (element.hasAttribute("open")) {
content.style.maxHeight = `${content.scrollHeight}px`;
} else {
content.style.maxHeight = "0px";
}
}; };
// Initialize max-height at load // Initialize max-height at load
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
for (const el of document.querySelectorAll("details.accordion")) { for (const el of document.querySelectorAll("details.accordion")) {
setMaxHeight(el as HTMLDetailsElement); updateMaxHeight(el as HTMLDetailsElement);
} }
}); });
@ -16,7 +24,7 @@ new MutationObserver((mutations: MutationRecord[]) => {
if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) { if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) {
continue; continue;
} }
setMaxHeight(target); updateMaxHeight(target);
} }
}).observe(document.body, { }).observe(document.body, {
attributes: true, attributes: true,

11
core/static/core/accordion.scss
View File

@ -44,12 +44,17 @@ details.accordion>.accordion-content {
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
padding: 1em 2.2em; padding: 1em 2.2em;
overflow: auto;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
opacity: 0;
overflow: hidden;
} }
details.accordion { details[open].accordion>.accordion-content {
transition: max-height 300ms ease-in-out; opacity: 1;
// Setting a transition on all states of the content
// will create a strange behavior where the transition
// continues without being shown, creating inconsistenties
transition: all 300ms ease-out;
} }