您的当前位置：首页正文

使用View Transitions实现Element Plus的炫酷主题切换

2024-11-08 来源：个人技术集锦

View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容，。

原理

当调用document.startViewTransition()时，API 会根据当前页面的屏幕截图，创建一个动画效果，将当前页面过渡到新的 DOM 状态。

这个startViewTransition函数会返回一个回调函数，我们需要在回调函数中更新我们的 Dom，从而产生一个动画。

使用

下方创建好了一个模板，其中包含一个按钮，点击按钮可以切换背景颜色，我们使用需要使用View Transitions API实现一个简单的圆形扩散动画效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            :root {
     
                --bg-color: #fff;
                background-color: var(--bg-color);
            }
            :root.dark {
     
                --bg-color: #000;
            }
        </style>
    </head>
    <body>
        <button id="btn">切换</button>
    </body>
    <script>
        btn.addEventListener("click", (e) => {
     
            document.documentElement.classList.toggle("dark");
        });
    </script>
</html>

创建一个过渡

首先，我们需要创建一个过渡，使用document.startViewTransition()函数，这个函数接收一个回调函数，我们在回调函数中更新 DOM 状态，会产生一个动画效果。

btn.addEventListener("click", (e) => {
   
    document.startViewTransition(() => {
   
        document.documentElement.classList.toggle("dark");
    });
});

这个时候会发现，页面动画产生了一个渐隐的效果，这是因为document.startViewTransition()函数默认会创建的一个效果，如果我们想要变更的话就需要对他进行修改。