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

效果"/>

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

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

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

作者GitHub： 有兴趣可关注！！

前言

View Transitions API

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

示例👇

兼容版本

VueUse

Vue的工具函数合集 /

正题

效果

安装

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】.documentElement.animate({clipPath: !isDark.value ? [...clipPath].reverse() : clipPath},{duration: 400,easing: 'ease-in',pseudoElement: !isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)'})})
}

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

推荐文章👇

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