diff --git a/variety/variety-shows.html b/variety/variety-shows.html
index 6147153..b9a890f 100644
--- a/variety/variety-shows.html
+++ b/variety/variety-shows.html
@@ -118,6 +118,19 @@
display: none;
}
+ body.variety-shows-page .variety-table__year-head {
+ transition: opacity 0.35s ease;
+ }
+
+ body.variety-shows-page .variety-table__year-head.is-closing {
+ opacity: 0;
+ }
+
+ body.variety-shows-page .variety-table__year-panel-row.is-closing .variety-table__year-panel-cell {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
body.variety-shows-page .variety-table tbody td {
padding: 11px 10px;
border: none;
@@ -171,7 +184,8 @@
}
@media (prefers-reduced-motion: reduce) {
- body.variety-shows-page .variety-table__year-panel {
+ body.variety-shows-page .variety-table__year-panel,
+ body.variety-shows-page .variety-table__year-head {
transition: none;
}
}
@@ -924,13 +938,21 @@
function setYearHeadVisible(slot, year, visible) {
const head = getYearHeadRow(slot, year);
- if (head) head.hidden = !visible;
+ if (!head) return;
+ head.classList.remove("is-closing");
+ head.hidden = !visible;
}
function openYearPanel(slot, panelRow, panel, year) {
if (!panelRow || !panel) return;
- setYearHeadVisible(slot, year, true);
+ const head = getYearHeadRow(slot, year);
+ if (head) {
+ head.classList.remove("is-closing");
+ head.hidden = false;
+ head.style.opacity = "1";
+ }
panelRow.hidden = false;
+ panelRow.classList.remove("is-closing");
if (panel.classList.contains("is-open")) {
panel.style.maxHeight = `${panel.scrollHeight}px`;
return;
@@ -946,21 +968,35 @@
if (!panelRow || !panel || !panel.classList.contains("is-open")) {
return;
}
+ const head = getYearHeadRow(slot, year);
+ panelRow.classList.add("is-closing");
+ if (head) head.classList.add("is-closing");
+ panel.classList.remove("is-open");
panel.style.maxHeight = `${panel.scrollHeight}px`;
requestAnimationFrame(() => {
panel.style.maxHeight = "0";
});
const onEnd = (e) => {
if (e.propertyName !== "max-height") return;
- panel.classList.remove("is-open");
panel.style.maxHeight = "";
+ panelRow.classList.remove("is-closing");
panelRow.hidden = true;
- setYearHeadVisible(slot, year, false);
+ if (head) {
+ head.classList.remove("is-closing");
+ head.hidden = true;
+ }
panel.removeEventListener("transitionend", onEnd);
};
panel.addEventListener("transitionend", onEnd);
}
+ function isYearAnimating(panel, panelRow) {
+ return (
+ panel?.classList.contains("is-open") ||
+ panelRow?.classList.contains("is-closing")
+ );
+ }
+
function syncYearRows(slot) {
const q = (input && input.value.trim().toLowerCase()) || "";
slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => {
@@ -989,7 +1025,11 @@
openYearPanel(slot, panelRow, panel, year);
panel.style.maxHeight = `${panel.scrollHeight}px`;
}
- } else {
+ } else if (
+ !yearOpen &&
+ !isYearAnimating(panel, panelRow) &&
+ panelRow?.hidden
+ ) {
setYearHeadVisible(slot, year, false);
}
@@ -1017,7 +1057,8 @@
} else {
closeYearPanel(slot, panelRow, panel, year);
}
- if (slot) syncYearRows(slot);
+ const q = (input && input.value.trim()) || "";
+ if (slot && q) syncYearRows(slot);
}
function filterVisibleRows() {