Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-10 21:47:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make hiding highlight button smooth

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-09-30 18:15:06 -04:00
parent ebcb600e99
commit 2064afb235
2 changed files with 8 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/content.css
View File

@@ -75,26 +75,28 @@
vertical-align: top; vertical-align: top;
} }
.autoHiding {
overflow: visible !important;
}
.autoHiding:not(.hidden) { .autoHiding:not(.hidden) {
transform: translateX(0%) scale(1); transform: translateX(0%) scale(1);
/* opacity is from YouTube page */ /* opacity is from YouTube page */
transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important; transition: transform 0.25s, width 0.25s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
} }
.autoHiding.hidden { .autoHiding.hidden {
transform: translateX(100%) scale(0); transform: translateX(100%) scale(0);
/* opacity is from YouTube page */ /* opacity is from YouTube page */
transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important; transition: transform 0.25s, width 0.25s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
width: 0px !important;
} }
.autoHiding.hidden.autoHideLeft { .autoHiding.hidden.autoHideLeft {
transform: translateX(-100%) scale(0); transform: translateX(-100%) scale(0);
} }
.autoHiding.hidden.animationDone {
display: none !important;
}
.playerButton.hidden { .playerButton.hidden {
display: none; display: none;
} }

7
src/utils.ts
View File

@@ -199,13 +199,6 @@ export default class Utils {
container.addEventListener("mouseleave", () => { container.addEventListener("mouseleave", () => {
if (element.classList.contains("autoHiding")) { if (element.classList.contains("autoHiding")) {
element.classList.add("hidden"); element.classList.add("hidden");
const animationEndListener = () => {
if (element.classList.contains("hidden")) element.classList.add("animationDone");
element.removeEventListener("transitionend", animationEndListener);
};
element.addEventListener("transitionend", animationEndListener);
} }
}); });
} }