bd4rr/vue-naive-admin
1
0
Fork 0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-04-30 22:29:01 +08:00
Code

style: 优化主题切换过渡动画

Browse Source
This commit is contained in:
zclzone 2024-06-25 18:17:17 +08:00
parent c230e86767
commit 3c2e120e34
2 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/common/ToggleTheme.vue
View File

@ -12,23 +12,51 @@ import { useAppStore } from '@/store'
const appStore = useAppStore()
const isDark = useDark()
function toggleDark({ clientX, clientY }) {
const maxRadius = Math.hypot(
Math.max(clientX, window.innerWidth - clientX),
Math.max(clientY, window.innerHeight - clientY),
)
const style = document.documentElement.style
style.setProperty('--circle-x', `${clientX}px`)
style.setProperty('--circle-y', `${clientY}px`)
style.setProperty('--circle-r', `${maxRadius}px`)
async function toggleDark({ clientX, clientY }) {
function handler() {
appStore.toggleDark()
useToggle(isDark)()
}
document.startViewTransition
? document.startViewTransition(handler)
: handler()
if (!document.startViewTransition) {
return handler()
}
const clipPath = [
`circle(0px at ${clientX}px ${clientY}px)`,
`circle(${Math.hypot(
Math.max(clientX, window.innerWidth - clientX),
Math.max(clientY, window.innerHeight - clientY),
)}px at ${clientX}px ${clientY}px)`,
]
await document.startViewTransition(handler).ready
document.documentElement.animate(
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
{
duration: 500,
easing: 'ease-in',
pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
},
)
// const maxRadius = Math.hypot(
// Math.max(clientX, window.innerWidth - clientX),
// Math.max(clientY, window.innerHeight - clientY),
// )
// const style = document.documentElement.style
// style.setProperty('--circle-x', `${clientX}px`)
// style.setProperty('--circle-y', `${clientY}px`)
// style.setProperty('--circle-r', `${maxRadius}px`)
// function handler() {
// appStore.toggleDark()
// useToggle(isDark)()
// }
// document.startViewTransition
// ? document.startViewTransition(handler)
// : handler()
}
</script>

19
src/styles/global.scss
View File

@ -74,21 +74,18 @@ body {
}
/* 切换主题的动画效果 */
::view-transition-old(root) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: 0.5s ease-in circle-animation;
mix-blend-mode: normal;
::view-transition-old(root),
.dark::view-transition-new(root) {
z-index: 1;
}
@keyframes circle-animation {
from {
clip-path: circle(0 at var(--circle-x) var(--circle-y));
}
to {
clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
}
::view-transition-new(root),
.dark::view-transition-old(root) {
z-index: 9999;
}