diff --git a/.github/release.md b/.github/release.md index 3058f96..3128933 100644 --- a/.github/release.md +++ b/.github/release.md @@ -7,5 +7,6 @@ - 优化提交中 Action 状态标签的位置 - 优化按钮和菜单下的图标颜色 - 优化仓库发布中的分支选择按钮样式 +- 优化向上弹窗的菜单动画 ## 🐞 Fix diff --git a/src/core/theme.ts b/src/core/theme.ts index 6eecdea..b4ca914 100644 --- a/src/core/theme.ts +++ b/src/core/theme.ts @@ -13,8 +13,10 @@ function stringToBoolean(str: string, name: string): boolean { } } -export const overlayAppear = "overlay-appear"; -export const animation = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}`; +export const overlayAppearDown = "overlay-appear-down"; +export const animationDown = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearDown}`; +export const overlayAppearUp = "overlay-appear-up"; +export const animationUp = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearUp}`; const emoji = ` .emoji[aria-label="check mark"], @@ -60,8 +62,12 @@ export function createTheme(theme: Theme): void { accentColor: themeVars.color.accent, colorScheme: isDarkTheme ? "dark" : "light", }); - globalKeyframes(overlayAppear, { + globalKeyframes(overlayAppearDown, { "0%": { opacity: 0, transform: "translateY(-12px)" }, "100%": { opacity: 1, transform: "translateY(0)" }, }); + globalKeyframes(overlayAppearUp, { + "0%": { opacity: 0, transform: "translateY(12px)" }, + "100%": { opacity: 1, transform: "translateY(0)" }, + }); } diff --git a/styles/public/dropdown.tsx b/styles/public/dropdown.tsx index 8169864..115894e 100644 --- a/styles/public/dropdown.tsx +++ b/styles/public/dropdown.tsx @@ -1,4 +1,4 @@ -import { animation } from "src/core/theme"; +import { animationDown, animationUp } from "src/core/theme"; import { css, otherThemeVars, themeVars } from "src/types/vars"; import { activeItemAfterStyle } from "styles/public/menu"; @@ -6,7 +6,7 @@ export const dropdown = css` .ui.dropdown, .ui.menu .ui.dropdown { .menu { - animation: ${animation}; + animation: ${animationDown}; // 统一所有下拉菜单的样式 background-color: ${themeVars.color.menu} !important; border: unset !important; @@ -67,6 +67,7 @@ export const dropdown = css` .ui.dropdown.upward, .ui.menu .ui.dropdown.upward { .menu { + animation: ${animationUp}; margin-bottom: 0.35em !important; } } diff --git a/styles/public/tippy.tsx b/styles/public/tippy.tsx index 66583f4..7a41803 100644 --- a/styles/public/tippy.tsx +++ b/styles/public/tippy.tsx @@ -1,4 +1,4 @@ -import { animation } from "src/core/theme"; +import { animationDown } from "src/core/theme"; import { css, otherThemeVars, themeVars } from "src/types/vars"; // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等 @@ -7,7 +7,7 @@ export const tippyBox = css` margin-top: -3px; border-radius: 12px; overflow: hidden; - animation: ${animation}; + animation: ${animationDown}; // 边框线同步 github 样式 &[data-theme="default"], &[data-theme="box-with-header"] {