Skip to content

fix: set logo background opaque when fade in #824

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MakinoharaShoko merged 1 commit into from
Jan 5, 2026
Merged

fix: set logo background opaque when fade in #824

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/webgal/src/UI/Logo/logo.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@
0%{
opacity: 1;
}
65%{
opacity: 1;
}
Comment on lines +53 to +55
Copy link

@gemini-code-assist gemini-code-assist bot Jan 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

这个修复是正确的，它解决了背景过早淡出的问题。

为了提高代码的可维护性，并使两个动画（change-img-anim 和 fadeout）之间的时间关系更明确，建议将关键的时间点（如 65%）提取为 SCSS 变量。这样，如果将来需要调整动画时间，只需修改变量即可，可以避免不同步的问题。

例如，可以这样做：

$logo-visible-end: 65%;

@keyframes change-img-anim {
  /* ... */
  #{$logo-visible-end} {
    opacity: 1;
  }
  /* ... */
}

@keyframes fadeout {
  /* ... */
  #{$logo-visible-end} {
    opacity: 1;
  }
  /* ... */
}

这只是一个关于代码可维护性的建议，当前实现的功能是完全正确的。

99%{
opacity: 0;
}
Expand Down