示例中的主题切换的动效, 我觉得好牛，完全想不通怎么实现的

[Jia-passerby]

例如这个，明暗模式同时存在, 求解，或者有什么关键字可以搜索

[xingxingdcf]

可以搜element-plus官网主题切换动画

[nightGuest-ye]

我刚好抄vban的代码，你可以看一下
<ElButton :class="[is-${theme}]" :aria-label="theme" text circle aria-live="polite" class="theme_toggle" @click.stop="toggleTheme"> <svg aria-hidden="true" height="18" viewBox="0 0 24 24" width="18"> <mask id="theme_toggle-moon" class="theme_toggle__moon" fill="var(--foreground)" stroke="none"> <rect fill="white" height="100%" width="100%" x="0" y="0" /> <circle cx="40" cy="8" fill="black" r="11" /> </mask> <circle id="sun" class="theme_toggle__sun" cx="12" cy="12" mask="url(#theme_toggle-moon)" r="11" /> <g class="theme_toggle__sun-beams"> <line x1="12" x2="12" y1="1" y2="3" /> <line x1="12" x2="12" y1="21" y2="23" /> <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" /> <line x1="18.36" x2="19.78" y1="18.36" y2="19.78" /> <line x1="1" x2="3" y1="12" y2="12" /> <line x1="21" x2="23" y1="12" y2="12" /> <line x1="4.22" x2="5.64" y1="19.78" y2="18.36" /> <line x1="18.36" x2="19.78" y1="5.64" y2="4.22" /> </g> </svg> </ElButton>
`<script setup lang="ts">
defineOptions({ name: 'ThemeToggle' });
import { computed, nextTick } from 'vue';
import { usePreferences, updatePreferences } from '../../../../preferences';
const { isDark } = usePreferences();

const theme = computed(() => {
return isDark.value ? 'light' : 'dark';
});

const setThemeMode = (value: boolean) => {
updatePreferences({ theme: { mode: value ? 'dark' : 'light' } });
};

function toggleTheme(event: MouseEvent) {
const isAppearanceTransition =
// @ts-expect-error
document.startViewTransition &&
!window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!isAppearanceTransition || !event) {
setThemeMode(!isDark.value);
return;
}
const x = event.clientX;
const y = event.clientY;
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
// @ts-ignore startViewTransition
const transition = document.startViewTransition(async () => {
setThemeMode(!isDark.value);
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.value ? [...clipPath].reverse() : clipPath
},
{
duration: 450,
easing: 'ease-in',
pseudoElement: isDark.value
? '::view-transition-old(root)'
: '::view-transition-new(root)'
}
);
});
}
</script> <style scoped lang="scss">
.el-button.is-text:not(.is-disabled):hover {
background-color: var(--accent);
}
.theme_toggle {
border-radius: 9999px;
cursor: pointer;
.theme_toggle__moon {
& > circle {
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
}
}

.theme_toggle__sun {
    // fill: hsl(var(--foreground) / 0.9);
    fill: var(--foreground);
    stroke: none;
    transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
    transform-origin: center center;

    &:hover > svg > & {
        // fill: hsl(var(--foreground) / 0.9);
        fill: var(--foreground);
    }
}

.theme_toggle__sun-beams {
    // stroke: hsl(var(--foreground) / 0.9);
    stroke: var(--foreground);
    stroke-width: 2px;
    transform-origin: center center;
    transition: transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
        opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);

    &:hover > svg > & {
        // stroke: hsl(var(--foreground) / 0.9);
        stroke: var(--foreground);
    }
}

&.is-light {
    .theme_toggle__sun {
        transform: scale(0.5);
    }

    .theme_toggle__sun-beams {
        transform: rotateZ(0.25turn);
    }
}

&.is-dark {
    &:hover {
        background-color: var(--accent);
    }
    .theme_toggle__moon {
        & > circle {
            transform: translateX(-20px);
        }
    }

    .theme_toggle__sun-beams {
        opacity: 0;
    }
}

&:hover > svg {
    .theme_toggle__sun,
    .theme_toggle__moon {
        fill: var(--foreground);
    }
}

}
</style>`

// 然后把这个样式代码放到全局上
html {
// 'light'、'dark'点击过渡样式
&::view-transition-new(root),
&::view-transition-old(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;
}

}