CSS3视图过渡动画

概述

网站的主题切换无非就是文字、背景图片或者颜色，我们可以先来看下 Element UI 官网的切换主题的动效：

PS：Antdesign UI的主题切换动画也是大同小异。

实现的两种方式

CSS 为主

<script setup>
const changeTheme = (e) => {if (document.startViewTransition) {document.startViewTransition(() => {document.documentElement.classList.toggle("dark");});} else {document.documentElement.classList.toggle("dark");}
};onMounted(() => {const target = document.querySelector(".target1");const { x, y } = target.getBoundingClientRect();document.documentElement.style.setProperty("--x", x + "px");document.documentElement.style.setProperty("--y", y + "px");
});
</script>
<style>
::view-transition-old(root) {animation: none;
}
::view-transition-new(root) {mix-blend-mode: normal;animation: clip 1s ease-in;
}@keyframes clip {from {clip-path: circle(0% at var(--x) var(--y));}to {clip-path: circle(100% at var(--x) var(--y));}
}
</style>

<