当前位置：首页 > article >正文

CSS3视图过渡动画

article 2025/2/27 11:28:50

概述

网站的主题切换无非就是文字、背景图片或者颜色，我们可以先来看下 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>