Hide topbar when scroll down

apqx · Oct 17, 2024 · d56e675 · d56e675
1 parent 235152c
commit d56e675
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 32 deletions.
diff --git a/_posts/original/2023-01-12-2023年，我换了新域名「牡丹」.md b/_posts/original/2023-01-12-2023年，我换了新域名「牡丹」.md
@@ -11,7 +11,7 @@ tags: 碎碎念 Code Blog 域名 Cloudflare GitHub DNS URL重定向
 pin: true
 ---
 
-七年，这个博客域名一直是`apqx.me`，从`GoDaddy`购买，每年续费168元就可以一直拥有它，而且因为域名的唯一性，它也早已成为我在互联网中独一无二的身份`ID`，很多信息都和它有关。
+七年，博客域名一直是`apqx.me`，从`GoDaddy`购买，每年续费168元就可以一直拥有它。
 
 `apqx`当然不是随机的无意义字符，其实是小时候喜欢的`长弓·阿帕奇`武装直升机的拼音缩写`apq`，至于后面的`x`，是因为当我决定要注册人生第一个域名`apq.me`时意外发现它竟然已经属于别人（明明几个月前还是未注册状态），只能遗憾在后面加一个`x`，变成`apqx.me`。
 

diff --git a/npm/dist/blog-scaffold-v2.0.0.js b/npm/dist/blog-scaffold-v2.0.0.js
diff --git a/npm/src/component/topbar.scss b/npm/src/component/topbar.scss
@@ -53,6 +53,8 @@ body {
     transition: all 0.4s ease;
 }
 
+// 执行中的CSS动画可以被新动画打断，会从当前状态开始过渡，而非从原始状态
+
 .top-app-bar--up {
     transform: translateY(var(--top-bar-slid-translateY));
     opacity: 0;

diff --git a/npm/src/component/topbar.ts b/npm/src/component/topbar.ts
@@ -29,10 +29,6 @@ export function initTopbar() {
 
     topAppBar = new MDCTopAppBar(topAppBarE)
     iconToggleTheme = new MDCIconButtonToggle(btnThemeE)
-    // 桌面浏览器启用毛玻璃
-    // if (!isMobileOrTablet()) {
-        // toggleTopbarGlass(true)
-    // }
 
     // 监听topbar的主题切换按钮
     btnThemeE.addEventListener("click", () => {
@@ -88,11 +84,11 @@ const animationDoneListener = () => {
     consoleDebug("Topbar animation done")
     // topAppBarE.style.animationPlayState = "initial"
     if (topAppBarE.classList.contains("top-app-bar--moving-up")) {
-        toggleClassWithEnable(topAppBarE, "top-app-bar--moving-up", false)
         toggleClassWithEnable(topAppBarE, "top-app-bar--up", true)
+        // toggleClassWithEnable(topAppBarE, "top-app-bar--moving-up", false)
     } else if (topAppBarE.classList.contains("top-app-bar--moving-down")) {
-        toggleClassWithEnable(topAppBarE, "top-app-bar--moving-down", false)
         toggleClassWithEnable(topAppBarE, "top-app-bar--down", true)
+        // toggleClassWithEnable(topAppBarE, "top-app-bar--moving-down", false)
     }
 }
 
@@ -131,7 +127,7 @@ const scrollListener = () => {
     }
     const scrollDown = window.scrollY > lastScrollY;
     if (scrollDown) {
-        // 向下滚动
+        // 控制条向下滚动
         if (Math.abs(window.scrollY - lastScrollChange.scrollY) > topbarDisplayTriggerScrollY) {
             toggleShowTopbar(false);
             // 触发变化，记录变化的点
@@ -141,9 +137,9 @@ const scrollListener = () => {
             };
         }
     } else {
-        // 向上滚动
+        // 控制条向上滚动
         if (Math.abs(window.scrollY - lastScrollChange.scrollY) > topbarDisplayTriggerScrollY) {
-            toggleShowTopbar(true);
+            // toggleShowTopbar(true);
             // 触发变化，记录变化的点
             lastScrollChange = {
                 scrollDown: scrollDown,
@@ -164,14 +160,14 @@ const scrollListener = () => {
 function toggleShowTopbar(show: boolean) {
     // topbar默认不包含up-class和down-class
     if (show) {
-        if (!topAppBarE.classList.contains("top-app-bar--up") && !topAppBarE.classList.contains("top-app-bar--moving-up")) {
-            // topbar处于默认的显示状态，不必启动动画
-            return
-        }
         // 展示，向下移动
-        if (!topAppBarE.classList.contains("top-app-bar--down") && !topAppBarE.classList.contains("top-app-bar--moving-down")) {
+        if (!topAppBarE.classList.contains("top-app-bar--moving-down") && !topAppBarE.classList.contains("top-app-bar--down")) {
+            if (!topAppBarE.classList.contains("top-app-bar--moving-up") && !topAppBarE.classList.contains("top-app-bar--up")) {
+                // topbar处于默认的显示状态，不必启动动画
+                return
+            }
             consoleDebug("ToggleShowTopbar " + show)
-            // topAppBarE.style.animationPlayState = "running"
+            blockTopbarKeyFrameAnimation(false)
             toggleClassWithEnable(topAppBarE, "top-app-bar--moving-down", true)
             toggleClassWithEnable(topAppBarE, "top-app-bar--moving-up", false)
             toggleClassWithEnable(topAppBarE, "top-app-bar--up", false)
@@ -180,10 +176,20 @@ function toggleShowTopbar(show: boolean) {
         // 隐藏，向上移动
         if (!topAppBarE.classList.contains("top-app-bar--up") && !topAppBarE.classList.contains("top-app-bar--moving-up")) {
             consoleDebug("ToggleShowTopbar " + show)
-            // topAppBarE.style.animationPlayState = "running"
+            blockTopbarKeyFrameAnimation(false)
             toggleClassWithEnable(topAppBarE, "top-app-bar--moving-up", true)
             toggleClassWithEnable(topAppBarE, "top-app-bar--moving-down", false)
             toggleClassWithEnable(topAppBarE, "top-app-bar--down", false)
         }
     }
 }
+
+export function blockTopbarKeyFrameAnimation(block: boolean) {
+    if (block) {
+        topAppBarE.style.animation = "none"
+        // topAppBarE.style.animationPlayState = "paused"
+    } else {
+        topAppBarE.style.animation = null;
+        // topAppBarE.style.animationPlayState = "running"
+    }
+}
diff --git a/npm/src/page/scaffold.ts b/npm/src/page/scaffold.ts
@@ -1,6 +1,6 @@
 // import "./scaffold.scss"
 import { isDebug, isWriting, runOnHtmlDone, runOnPageBackFromCache, runOnPageDone } from "../util/tools"
-import { initTopbar } from "../component/topbar"
+import { blockTopbarKeyFrameAnimation, initTopbar } from "../component/topbar"
 import { initDrawer } from "../component/drawer"
 import { checkUserTheme, initTheme } from "../component/theme"
 import { initLocalRepository } from "../repository/LocalRepository"
@@ -35,6 +35,7 @@ runOnPageDone(() => {
 })
 
 runOnPageBackFromCache(() => {
+    blockTopbarKeyFrameAnimation(true)
     checkUserTheme()
 })