arthur/artsite
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artsite.git synced 2026-01-14 18:59:59 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Add custom theme animation instead of transition view

Browse Source
This commit is contained in:
Arthur Danjou
2024-06-24 23:50:34 +02:00
parent c69c462f34
commit 72bcc01073
1 changed files with 29 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/components/AppHeader.vue
View File

@@ -31,13 +31,14 @@ const navs = [
]
function toggleTheme() {
if (!document.startViewTransition) {
document.body.style.animation = 'theme-switch-on .5s'
setTimeout(() => {
isDark.value = !isDark.value
return
}
document.startViewTransition(() => {
})
document.body.style.animation = 'theme-switch-off .5s'
setTimeout(() => {
document.body.style.animation = ''
}, 500)
}, 500)
}
</script>
@@ -84,4 +85,26 @@ function toggleTheme() {
.handwriting {
font-family: 'Dancing Script', cursive;
}
@keyframes theme-switch-on {
0% {
filter: blur(0);
transform: scale(1);
}
100% {
transform: scale(0.98);
filter: blur(3px);
}
}
@keyframes theme-switch-off {
0% {
transform: scale(0.98);
filter: blur(3px);
}
100% {
filter: blur(0);
transform: scale(1);
}
}
</style>