鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。
最近看到 ElementPlus 官網上的切換主題方式非常有趣，這是一個過渡的動畫效果。
圖片
所以在網上查了一番，找到基本的實現方法。
首先我們起一個 html 文件，寫一個按鈕，以及簡單的背景顏色切換，來模擬主題的切換。
圖片
可以看到實現了最簡單的主題切換效果。
圖片
想要實現過渡效果，需要先用到一個 JavaScript 的原生方法：document.startViewTransition。
這個方法是用來做動畫過渡效果的。
圖片
通過調用 API，讓瀏覽器為新舊兩種不同視圖分別捕獲并建立了快照 (即 ::view-transition-old(root)舊快照 和 ::view-transition-new(root) 新快照)，而后新舊兩快照在 ::view-transition-image-pair(root) 容器中完成轉場動畫的過渡。動畫結束后則刪除其相關偽元素 (快照和容器)。
圖片
我們可以應用一下這個 API。
圖片
現在去切換主題顏色，發現有過渡效果了。
圖片
接下來實現圓形過渡的效果，其實這個動畫最終是展示::view-transition-new(root)這個偽元素，所以我們只需要讓這個偽元素有原型擴散的過渡動畫即可！
那圓形擴散動畫咋做呢？其實很簡單，只需要將偽元素的半徑，從0 -> 100%即可。
圖片
代碼如下：
圖片
并且我們需要取消掉 document.startViewTransition默認的動畫效果，不然它會導致我們自定義的動畫效果無效。
圖片
最終得到圓形擴散的效果：
<!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; } ::view-transition-new(root), ::view-transition-old(root) { /* 關閉默認動畫 */ animation: none; } </style> </head> <body> <button id="themeButton">切換主題</button> <script> const themeButton = document.getElementById("themeButton"); themeButton.addEventListener("click", (e) => { // 執行切換主題的操作 const transition = document.startViewTransition(() => { // 動畫過渡切換主題色 document.documentElement.classList.toggle("dark"); }); // document.startViewTransition 的 ready 返回一個 Promise transition.ready.then(() => { // 獲取鼠標的坐標 const { clientX, clientY } = e; // 計算最大半徑 const radius = Math.hypot( Math.max(clientX, innerWidth - clientX), Math.max(clientY, innerHeight - clientY) ); // 圓形動畫擴散開始 document.documentElement.animate( { clipPath: [ `circle(0% at ${clientX}px ${clientY}px)`, `circle(${radius}px at ${clientX}px ${clientY}px)`, ], }, // 設置時間，已經目標偽元素 { duration: 300, pseudoElement: "::view-transition-new(root)", } ); }); }); </script> </body></html>本文鏈接：http://m.www897cc.com/showinfo-26-100986-0.html餓了么面試官：實現一下 Element-UI 官網的主題切換動畫！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： VueConf 2024 落幕，7大模塊講解 Vue 未來生態變化！
下一篇： 想看源碼但是無從下口怎么辦？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號