jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 綜藝表收合動畫跳動

Browse Source
This commit is contained in:
jekkinoopy
2026-05-17 19:31:36 +08:00
parent 2ea6cc03f4
commit 1b68c233dc
1 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
variety/variety-shows.html
+48 -7
View File
@@ -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() {