l/wrath
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fix view transition animation

Browse source
This commit is contained in:
Guoqi Sun 2025-02-04 15:43:04 +08:00
parent 1f99fc17f5
commit e44df108b4
3 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/layouts/base.astro
View file

@ -1,5 +1,6 @@
--- ---
import "~/styles/globals.css" import "~/styles/globals.css"
import "~/styles/view-transition.css"
import { NoiseBackground } from "~/components/react/noise-background" import { NoiseBackground } from "~/components/react/noise-background"
import { getLangFromUrl } from "~/i18n/utils" import { getLangFromUrl } from "~/i18n/utils"
import { GoogleAnalytics } from "astro-google-analytics" import { GoogleAnalytics } from "astro-google-analytics"

28
src/styles/globals.css
View file

@ -1,30 +1,2 @@
@import "tailwindcss"; @import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
/* Theme toggle effect */
/* https://theme-toggle.rdsx.dev/ */
/* https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API */
::view-transition-group(root) {
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
::view-transition-new(root) {
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>')
top left / 0 no-repeat;
mask-origin: content-box;
animation: scale 1s;
transform-origin: top left;
}
::view-transition-old(root),
.dark::view-transition-old(root) {
animation: scale 1s;
transform-origin: top left;
z-index: -1;
}
@keyframes scale {
to {
mask-size: 350vmax;
}
}

27
src/styles/view-transition.css Normal file
View file

@ -0,0 +1,27 @@
/* Theme toggle effect */
/* https://theme-toggle.rdsx.dev/ */
/* https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API */
::view-transition-group(root) {
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
::view-transition-new(root) {
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>')
top left / 0 no-repeat;
mask-origin: content-box;
animation: scale 1s;
transform-origin: top left;
}
::view-transition-old(root),
.dark::view-transition-old(root) {
animation: scale 1s;
transform-origin: top left;
z-index: -1;
}
@keyframes scale {
to {
mask-size: 350vmax;
}
}