bd4rr/vue-naive-admin
1
0
Fork 0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-05-01 06:39: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 appStore = useAppStore()
const isDark = useDark() const isDark = useDark()
function toggleDark({ clientX, clientY }) { async 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`)
function handler() { function handler() {
appStore.toggleDark() appStore.toggleDark()
useToggle(isDark)() useToggle(isDark)()
} }
document.startViewTransition if (!document.startViewTransition) {
? document.startViewTransition(handler) return handler()
: 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> </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; animation: none;
mix-blend-mode: normal; mix-blend-mode: normal;
} }
::view-transition-new(root) { ::view-transition-old(root),
animation: 0.5s ease-in circle-animation; .dark::view-transition-new(root) {
mix-blend-mode: normal; z-index: 1;
} }
@keyframes circle-animation { ::view-transition-new(root),
from { .dark::view-transition-old(root) {
clip-path: circle(0 at var(--circle-x) var(--circle-y)); z-index: 9999;
}
to {
clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
}
} }