VueUse、View Transitions API实现暗黑模式主题动画切换效果

Thetimezipsby

已于 2023-12-25 13:52:43 修改

阅读量1.4k

点赞数 4

分类专栏：常用代码块文章标签：前端 vue.js css javascript

于 2023-11-08 11:58:27 首次发布

本文链接：https://blog.csdn.net/qq_43775179/article/details/134284164

版权

常用代码块专栏收录该内容

7 篇文章 0 订阅

订阅专栏

VueUse、View Transitions API实现暗黑模式主题动画切换效果

前言
正题

作者GitHub：https://github.com/gitboyzcf 有兴趣可关注！！

前言

View Transitions API

View Transitions API 是原生JavaScript提供一种能让Dom更加丝滑的API

示例👇

兼容版本

VueUse

Vue的工具函数合集 https://vueuse.org/

正题

效果

安装

npm install @vueuse/core
or
pnpm install @vueuse/core
or
yarn add @vueuse/core

代码

以下代码放入自己项目对应文件中即可

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2147483646;
}

/* 根据自己选择器修改 */
[data-bs-theme="dark"]::view-transition-old(root) {
  z-index: 2147483646;
}
[data-bs-theme="dark"]::view-transition-new(root) {
  z-index: 1;
}

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark({
  selector: 'html',
  attribute: 'data-bs-theme',
  valueDark: 'dark',
  valueLight: 'light'
})

const toggleDark = useToggle(isDark);

const toggleTheme = (event) => {
  const x = event.clientX;
  const y = event.clientY;
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // 兼容性处理
  if (!document.startViewTransition) {
    toggleDark();
    return;
  }
  const transition = document.startViewTransition(async () => {
    toggleDark();
  });

  transition.ready.then(() => {
    const clipPath = [
      `circle(0px at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ];
    console.log(isDark.value);
    document.documentElement.animate(
      {
        clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
      },
      {
        duration: 400,
        easing: "ease-in",
        pseudoElement: isDark.value
          ? "::view-transition-old(root)"
          : "::view-transition-new(root)",
      }
    );
  });
};