mirror of
https://github.com/un-pany/v3-admin-vite.git
synced 2025-04-22 03:49:19 +08:00
Revert "feat:主题切换动画"
This reverts commit 2948f86986a75af91540ef9bfec1ec00f1a055fb.
This commit is contained in:
parent
56f5e1392e
commit
54e86ab517
@ -1,25 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { type ThemeName, useTheme } from "@/hooks/useTheme"
|
||||
import { useTheme } from "@/hooks/useTheme"
|
||||
import { MagicStick } from "@element-plus/icons-vue"
|
||||
|
||||
const { themeList, activeThemeName, setTheme } = useTheme()
|
||||
|
||||
const onChangeTheme = (event: MouseEvent, themeName: ThemeName) => {
|
||||
document.documentElement.style.setProperty("--x", event.clientX + "px")
|
||||
document.documentElement.style.setProperty("--y", event.clientY + "px")
|
||||
const handler = () => setTheme(themeName)
|
||||
// @ts-ignore
|
||||
if (document.startViewTransition) {
|
||||
// @ts-ignore
|
||||
document.startViewTransition(handler)
|
||||
} else {
|
||||
handler()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown trigger="click">
|
||||
<el-dropdown trigger="click" @command="setTheme">
|
||||
<div>
|
||||
<el-tooltip effect="dark" content="主题模式" placement="bottom">
|
||||
<el-icon :size="20">
|
||||
@ -34,7 +21,6 @@ const onChangeTheme = (event: MouseEvent, themeName: ThemeName) => {
|
||||
:key="index"
|
||||
:disabled="activeThemeName === theme.name"
|
||||
:command="theme.name"
|
||||
@click="(e) => onChangeTheme(e, theme.name)"
|
||||
>
|
||||
<span>{{ theme.title }}</span>
|
||||
</el-dropdown-item>
|
||||
|
@ -20,23 +20,6 @@ html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
::view-transition-new(root) {
|
||||
mix-blend-mode: normal;
|
||||
animation: wave 0.7s ease-in;
|
||||
}
|
||||
@keyframes wave {
|
||||
from {
|
||||
clip-path: circle(0% at var(--x) var(--y));
|
||||
}
|
||||
to {
|
||||
clip-path: circle(150% at var(--x) var(--y));
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: var(--v3-body-bg-color);
|
||||
|
Loading…
x
Reference in New Issue
Block a user