同步字符提示的提示框动画

CHANGELOG.md

@@ -5,6 +5,8 @@
 - 优化用户头像样式
 - 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
 - 优化用户动态样式
+- 优化仓库发布页面样式
+- 同步字符提示的提示框动画
 
 ### 🐞 Fix
 

src/core/theme.ts

@@ -6,6 +6,8 @@ import type { MapLeafNodes, WithOptionalLayer } from "./types";
 
 export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
 
+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";

styles/public/animation.ts

@@ -1,7 +1,16 @@
-import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
+import { overlayAppear, overlayAppearDown, overlayAppearUp } from "src/core/theme";
 import { css } from "src/types/vars";
 
 export const keyframe = css`
+  // 出现动画
+  @keyframes ${overlayAppear} {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
   // 向下出现动画
   @keyframes ${overlayAppearDown} {
     0% {

styles/public/tippy.ts

@@ -1,4 +1,4 @@
-import { animationDown } from "src/core/theme";
+import { animation, animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
@@ -43,6 +43,7 @@ export const tippyBox = css`
     }
     // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
     &[data-theme="tooltip"] {
+      animation: ${animation};
       .tippy-content {
         font-size: 12px;
         font-weight: 400;