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

news2024/11/24 12:52:32

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.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(() => {
    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/animate
    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)'
      }
    )
  })
}