2024-07-24 記錄一則切換頁面背景顏色效果

叶乘风發表於2024-07-24

效果：點選切換按鈕，背景色由白色變成黑色，從指定的地方開始過渡

點選按鈕：

<div ref="themeBtn" @click="changeTheme">點選切換</div>

切換邏輯：

// 主題切換按鈕
const themeBtn = ref(null);

/* 改變顏色 */
const changeTheme = () => {
    // 建立一個過渡物件
    const transition = document.startViewTransition(() => {
        document.documentElement.classList.toggle('dark')
    })

    const width = themeBtn.value.getBoundingClientRect().width // 按鈕的寬度
    const height = themeBtn.value.getBoundingClientRect().height // 按鈕的高度
    const x = themeBtn.value.getBoundingClientRect().x + width / 2 // 按鈕的中心x座標
    const y = themeBtn.value.getBoundingClientRect().y + height / 2 // 按鈕的中心y座標

    // 計算展開圓的半徑
    const tragetRadius = Math.hypot(
        Math.max(x, window.innerWidth - x),
        Math.max(y, window.innerHeight - y)
    )

    // 設定過渡的動畫效果
    transition.ready.then(() => {
        document.documentElement.animate({
            clipPath: [`circle(0% at ${x}px ${y}px)`, `circle(${tragetRadius}px at ${x}px ${y}px)`]
        }, {
            duration: 1000,
            // pseudoElement 
            // 設定過渡效果的偽元素，這裡設定為根元素的偽元素
            // 這樣過渡效果就會作用在根元素上
            pseudoElement: '::view-transition-new(root)',
        })
    })
}

樣式：

:root {
    --background-color: #fff;
    --color: #282c34;
    background-color: var(--background-color);
    color: var(--color);
  }
  
  :root.dark {
    --background-color: #282c34;
    --color: #fff;
  }
  
  /* 隱藏預設的過渡效果 */
  ::view-transition-new(root),
  ::view-transition-old(root) {
    animation: none;
  }

注意：本文參照https://juejin.cn/post/7363836438935552035來寫的，可以看下原文，支援一下原作者。

相關文章