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

本文主要是介绍VueUse、View Transitions API实现暗黑模式主题动画切换效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

前言
- View Transitions API
- - 兼容版本
- VueUse
正题
- 效果
- 安装
- 代码

作者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

代码

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

/* 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */
/* 根据自己选择器修改 */
[data-bs-theme='dark']::view-transition-old(root) {z-index: 1;
}
[data-bs-theme='dark']::view-transition-new(root) {z-index: 999;
}::view-transition-old(root) {z-index: 999;
}
::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.clientXconst y = event.clientYconst endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))// 兼容性处理if (!document.startViewTransition) {toggleDark()return}const transition = document.startViewTransition(() => {toggleDark()})transition.ready.then(() => {const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]// 关于【documentElement.animate】https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animatedocument.documentElement.animate({clipPath: !isDark.value ? [...clipPath].reverse() : clipPath},{duration: 400,easing: 'ease-in',pseudoElement: !isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)'})})
}