transitions on appearance switch
This commit is contained in:
parent
3693bd998a
commit
adac1e3733
@ -2,6 +2,44 @@
|
|||||||
import DefaultTheme from "vitepress/theme";
|
import DefaultTheme from "vitepress/theme";
|
||||||
import Sidebar from "./components/SidebarCard.vue";
|
import Sidebar from "./components/SidebarCard.vue";
|
||||||
import Announcement from "./components/Announcement.vue";
|
import Announcement from "./components/Announcement.vue";
|
||||||
|
import { useData } from "vitepress";
|
||||||
|
import { nextTick, provide } from "vue";
|
||||||
|
|
||||||
|
const { isDark } = useData();
|
||||||
|
|
||||||
|
const enableTransitions = () =>
|
||||||
|
"startViewTransition" in document &&
|
||||||
|
window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
|
||||||
|
|
||||||
|
provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
|
||||||
|
if (!enableTransitions()) {
|
||||||
|
isDark.value = !isDark.value;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const clipPath = [
|
||||||
|
`circle(0px at ${x}px ${y}px)`,
|
||||||
|
`circle(${Math.hypot(
|
||||||
|
Math.max(x, innerWidth - x),
|
||||||
|
Math.max(y, innerHeight - y),
|
||||||
|
)}px at ${x}px ${y}px)`,
|
||||||
|
];
|
||||||
|
|
||||||
|
// @ts-expect-error
|
||||||
|
await document.startViewTransition(async () => {
|
||||||
|
isDark.value = !isDark.value;
|
||||||
|
await nextTick();
|
||||||
|
}).ready;
|
||||||
|
|
||||||
|
document.documentElement.animate(
|
||||||
|
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
|
||||||
|
{
|
||||||
|
duration: 300,
|
||||||
|
easing: "ease-in",
|
||||||
|
pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
const { Layout } = DefaultTheme;
|
const { Layout } = DefaultTheme;
|
||||||
</script>
|
</script>
|
||||||
@ -17,3 +55,29 @@ const { Layout } = DefaultTheme;
|
|||||||
<Content />
|
<Content />
|
||||||
</Layout>
|
</Layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
::view-transition-old(root),
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: none;
|
||||||
|
mix-blend-mode: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
::view-transition-old(root),
|
||||||
|
.dark::view-transition-new(root) {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::view-transition-new(root),
|
||||||
|
.dark::view-transition-old(root) {
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPSwitchAppearance {
|
||||||
|
width: 22px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPSwitchAppearance .check {
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user