ElementPlus官网的暗黑模式切换动画

早就看到了官网切换暗黑模式的动画了觉得很厉害
今天正好整理登录页面的时候觉得可以看看自己肯定是不会的啦百度看看去
看到了这个api: View Transitions API -- 主要用于在页面状态变化时自动生成过渡动画

使用方法

在需要动画效果方法中调用document.startViewTransition(callback)函数
callback方法中调用实际修改状态的方法
transition.ready.then() 意思是过渡前的准备已经做好了, 你可以做动画了
在这里面定义你自己的css动画当然他有自己默认的效果: 淡入淡出
如果你要用自己的动画一定记得在全局的style中写上
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
否则自己写的动画不生效

其实就是callback调用之前生成一个屏幕快照 callback执行完毕后在生成一张然后使用你提供的动画进行过渡

最后是源代码

// 使用 View Transitions API
    if (document.startViewTransition) {
        const transition = document.startViewTransition(() => {
            isDark.value = !isDark.value
            dataThemeChange(overallStyle.value) // 实际切换主题
        })
        transition.ready.then(() => {
            const switchEl = themeSwitchRef.value as HTMLElement
            const rect = switchEl.getBoundingClientRect()
            const x = rect.left + rect.width / 2
            const y = rect.top + rect.height / 2
            // 从点击点到窗口最远边缘的距离，这个距离即为圆的半径，用于确定一个圆形裁剪路径 (clip path) 的最大尺寸，以便覆盖整个视窗。
            const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
            const clipPath = [`circle(0 at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]
            // 实现过渡的过程
            // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate 这里是关于动画的
            document.documentElement.animate(
                {
                    clipPath: isDark.value ? clipPath.reverse() : clipPath
                },
                {
                    duration: 500,
                    easing: 'ease-in',
                    // 要进行动画的伪元素
                    pseudoElement: isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)'
                }
            )
        })
    } else {
        dataThemeChange(overallStyle.value)
    }