PANDA-JSR/SecScore
1
0
Fork 0
mirror of https://github.com/SECTL/SecScore.git synced 2026-07-19 12:34:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 同步积分弹窗遮罩模糊动画

Browse Source
This commit is contained in:
JSR
2026-07-18 09:59:12 +08:00
parent f9e392ada7
commit cb2b4a963a
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home.tsx
+16 -4
View File
@@ -864,11 +864,17 @@ export const Home: React.FC<HomeProps> = ({
if (maskEl) { if (maskEl) {
operationMaskAnimationRef.current?.cancel() operationMaskAnimationRef.current?.cancel()
maskEl.style.visibility = "visible" maskEl.style.visibility = "visible"
operationMaskAnimationRef.current = maskEl.animate([{ opacity: 0 }, { opacity: 1 }], { operationMaskAnimationRef.current = maskEl.animate(
[
{ opacity: 0, backdropFilter: "blur(0px)", WebkitBackdropFilter: "blur(0px)" },
{ opacity: 1, backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
],
{
duration: operationMorphOpenDuration, duration: operationMorphOpenDuration,
easing: operationMorphEasing, easing: operationMorphEasing,
fill: "both", fill: "both",
}) }
)
logHome("operation:morph:mask-fade-in", { logHome("operation:morph:mask-fade-in", {
duration: operationMorphOpenDuration, duration: operationMorphOpenDuration,
easing: operationMorphEasing, easing: operationMorphEasing,
@@ -1250,11 +1256,17 @@ export const Home: React.FC<HomeProps> = ({
} }
) )
if (maskEl) { if (maskEl) {
operationMaskAnimationRef.current = maskEl.animate([{ opacity: 1 }, { opacity: 0 }], { operationMaskAnimationRef.current = maskEl.animate(
[
{ opacity: 1, backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
{ opacity: 0, backdropFilter: "blur(0px)", WebkitBackdropFilter: "blur(0px)" },
],
{
duration: operationMorphCloseDuration, duration: operationMorphCloseDuration,
easing: operationMorphCloseEasing, easing: operationMorphCloseEasing,
fill: "both", fill: "both",
}) }
)
logHome("operation:morph:mask-fade-out", { logHome("operation:morph:mask-fade-out", {
duration: operationMorphCloseDuration, duration: operationMorphCloseDuration,
easing: operationMorphCloseEasing, easing: operationMorphCloseEasing,