CSS3视图过渡动画

Jinuss

已于 2024-12-04 08:56:34 修改

阅读量1.3k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端 # CSS 文章标签：前端 html5 css3

于 2024-08-24 12:03:06 首次发布

本文链接：https://blog.csdn.net/m0_46281382/article/details/141497599

概述

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