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

作者GitHub:github.com/gitboyzcf 有兴趣可关注!!

前言

View Transitions API

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

示例 👇

兼容版本

VueUse

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

正题

效果

安装

bash 复制代码
npm install @vueuse/core
or
pnpm install @vueuse/core
or
yarn add @vueuse/core

代码

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

css 复制代码
::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;
}
javascript 复制代码
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)",
      }
    );
  });
};

示例

github.com/gitboyzcf/v...

到这里就结束了,后续还会更新 前端 系列相关,还请持续关注! 感谢阅读,若有错误可以在下方评论区留言哦!!!

推荐文章👇

太丝滑了!了解一下原生的视图转换动画 View Transitions

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny072 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'3 小时前
css `lh`单位
前端·css
前端君3 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite