renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: temporarily hide light and dark theme transition animations

Browse Source
This commit is contained in:
Hakadao
2024-01-08 12:10:16 +08:00
parent cd523dd29f
commit 518549cae1
3 changed files with 125 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/Dock/Dock.vue
View File

@@ -84,55 +84,62 @@ onMounted(() => {
}
})
// eslint-disable-next-line unused-imports/no-unused-vars
function toggleDark(e: MouseEvent) {
const isAppearanceTransition = typeof document !== 'undefined'
// @ts-expect-error: Transition API
&& document.startViewTransition
&& !window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (!isAppearanceTransition) {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
}
else {
const x = e.clientX
const y = e.clientY
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)
const isDark = currentAppColorScheme.value === 'dark'
// @ts-expect-error: Transition API
const transition = document.startViewTransition(async () => {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
await nextTick()
})
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
transition.ready.then(() => {
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${endRadius}px at ${x}px ${y}px)`,
]
document.documentElement.animate(
{
clipPath: isDark
? [...clipPath].reverse()
: clipPath,
},
{
duration: 400,
easing: 'ease-in',
pseudoElement: isDark
? '::view-transition-old(root)'
: '::view-transition-new(root)',
},
)
})
}
// const isAppearanceTransition = typeof document !== 'undefined'
// // @ts-expect-error: Transition API
// && document.startViewTransition
// && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
// if (!isAppearanceTransition) {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// }
// else {
// const x = e.clientX
// const y = e.clientY
// const endRadius = Math.hypot(
// Math.max(x, innerWidth - x),
// Math.max(y, innerHeight - y),
// )
// const isDark = currentAppColorScheme.value === 'dark'
// // @ts-expect-error: Transition API
// const transition = document.startViewTransition(async () => {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// await nextTick()
// })
// transition.ready.then(() => {
// const clipPath = [
// `circle(0px at ${x}px ${y}px)`,
// `circle(${endRadius}px at ${x}px ${y}px)`,
// ]
// document.documentElement.animate(
// {
// clipPath: isDark
// ? [...clipPath].reverse()
// : clipPath,
// },
// {
// duration: 400,
// easing: 'ease-in',
// pseudoElement: isDark
// ? '::view-transition-old(root)'
// : '::view-transition-new(root)',
// },
// )
// })
// }
}
function toggleDockHide(hide: boolean) {

99
src/components/RightSideButtons/RightSideButtons.vue
View File

@@ -16,55 +16,60 @@ const currentAppColorScheme = computed((): 'dark' | 'light' => {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
})
// eslint-disable-next-line unused-imports/no-unused-vars
function toggleDark(e: MouseEvent) {
const isAppearanceTransition = typeof document !== 'undefined'
// @ts-expect-error: Transition API
&& document.startViewTransition
&& !window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (!isAppearanceTransition) {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
}
else {
const x = e.clientX
const y = e.clientY
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)
const isDark = currentAppColorScheme.value === 'dark'
// @ts-expect-error: Transition API
const transition = document.startViewTransition(async () => {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
await nextTick()
})
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
// const isAppearanceTransition = typeof document !== 'undefined'
// // @ts-expect-error: Transition API
// && document.startViewTransition
// && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
// if (!isAppearanceTransition) {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// }
// else {
// const x = e.clientX
// const y = e.clientY
// const endRadius = Math.hypot(
// Math.max(x, innerWidth - x),
// Math.max(y, innerHeight - y),
// )
// const isDark = currentAppColorScheme.value === 'dark'
// // @ts-expect-error: Transition API
// const transition = document.startViewTransition(async () => {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// await nextTick()
// })
transition.ready.then(() => {
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${endRadius}px at ${x}px ${y}px)`,
]
document.documentElement.animate(
{
clipPath: isDark
? [...clipPath].reverse()
: clipPath,
},
{
duration: 400,
easing: 'ease-in',
pseudoElement: isDark
? '::view-transition-old(root)'
: '::view-transition-new(root)',
},
)
})
}
// transition.ready.then(() => {
// const clipPath = [
// `circle(0px at ${x}px ${y}px)`,
// `circle(${endRadius}px at ${x}px ${y}px)`,
// ]
// document.documentElement.animate(
// {
// clipPath: isDark
// ? [...clipPath].reverse()
// : clipPath,
// },
// {
// duration: 400,
// easing: 'ease-in',
// pseudoElement: isDark
// ? '::view-transition-old(root)'
// : '::view-transition-new(root)',
// },
// )
// })
// }
}
</script>

37
src/styles/main.scss
View File

@@ -79,21 +79,22 @@ html.dark.bewly-design {
display: none;
}
/* Color Mode transition */
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root) {
z-index: 1;
}
::view-transition-new(root) {
z-index: 2147483646;
}
.dark::view-transition-old(root) {
z-index: 2147483646;
}
.dark::view-transition-new(root) {
z-index: 1;
}
// /* Color Mode transition */
// ::view-transition-old(root),
// ::view-transition-new(root) {
// position: relative;
// animation: none;
// mix-blend-mode: normal;
// }
// ::view-transition-old(root) {
// z-index: 1;
// }
// ::view-transition-new(root) {
// z-index: 2147483646;
// }
// .dark::view-transition-old(root) {
// z-index: 2147483646;
// }
// .dark::view-transition-new(root) {
// z-index: 1;
// }