直屏旗艦來(lái)了 iQOO 12和K70 Pro同臺(tái)競(jìng)技
旗艦機(jī)基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛(ài)好者在苦等一款直屏旗艦，這次，你們等到了。據(jù)博主數(shù)碼閑聊站帶來(lái)的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心。
最近看到 ElementPlus 官網(wǎng)上的切換主題方式非常有趣，這是一個(gè)過(guò)渡的動(dòng)畫效果。
圖片
所以在網(wǎng)上查了一番，找到基本的實(shí)現(xiàn)方法。
首先我們起一個(gè) html 文件，寫一個(gè)按鈕，以及簡(jiǎn)單的背景顏色切換，來(lái)模擬主題的切換。
圖片
可以看到實(shí)現(xiàn)了最簡(jiǎn)單的主題切換效果。
圖片
想要實(shí)現(xiàn)過(guò)渡效果，需要先用到一個(gè) JavaScript 的原生方法：document.startViewTransition。
這個(gè)方法是用來(lái)做動(dòng)畫過(guò)渡效果的。
圖片
通過(guò)調(diào)用 API，讓瀏覽器為新舊兩種不同視圖分別捕獲并建立了快照 (即 ::view-transition-old(root)舊快照 和 ::view-transition-new(root) 新快照)，而后新舊兩快照在 ::view-transition-image-pair(root) 容器中完成轉(zhuǎn)場(chǎng)動(dòng)畫的過(guò)渡。動(dòng)畫結(jié)束后則刪除其相關(guān)偽元素 (快照和容器)。
圖片
我們可以應(yīng)用一下這個(gè) API。
圖片
現(xiàn)在去切換主題顏色，發(fā)現(xiàn)有過(guò)渡效果了。
圖片
接下來(lái)實(shí)現(xiàn)圓形過(guò)渡的效果，其實(shí)這個(gè)動(dòng)畫最終是展示::view-transition-new(root)這個(gè)偽元素，所以我們只需要讓這個(gè)偽元素有原型擴(kuò)散的過(guò)渡動(dòng)畫即可！
那圓形擴(kuò)散動(dòng)畫咋做呢？其實(shí)很簡(jiǎn)單，只需要將偽元素的半徑，從0 -> 100%即可。
圖片
代碼如下：
圖片
并且我們需要取消掉 document.startViewTransition默認(rèn)的動(dòng)畫效果，不然它會(huì)導(dǎo)致我們自定義的動(dòng)畫效果無(wú)效。
圖片
最終得到圓形擴(kuò)散的效果：
<!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 { /* 默認(rèn)亮主題 */ --bg-color: #fff; background-color: var(--bg-color); } :root.dark { /* 暗主題 */ --bg-color: #000; } ::view-transition-new(root), ::view-transition-old(root) { /* 關(guān)閉默認(rèn)動(dòng)畫 */ animation: none; } </style> </head> <body> <button id="themeButton">切換主題</button> <script> const themeButton = document.getElementById("themeButton"); themeButton.addEventListener("click", (e) => { // 執(zhí)行切換主題的操作 const transition = document.startViewTransition(() => { // 動(dòng)畫過(guò)渡切換主題色 document.documentElement.classList.toggle("dark"); }); // document.startViewTransition 的 ready 返回一個(gè) Promise transition.ready.then(() => { // 獲取鼠標(biāo)的坐標(biāo) const { clientX, clientY } = e; // 計(jì)算最大半徑 const radius = Math.hypot( Math.max(clientX, innerWidth - clientX), Math.max(clientY, innerHeight - clientY) ); // 圓形動(dòng)畫擴(kuò)散開始 document.documentElement.animate( { clipPath: [ `circle(0% at ${clientX}px ${clientY}px)`, `circle(${radius}px at ${clientX}px ${clientY}px)`, ], }, // 設(shè)置時(shí)間，已經(jīng)目標(biāo)偽元素 { duration: 300, pseudoElement: "::view-transition-new(root)", } ); }); }); </script> </body></html>本文鏈接：http://www.tebozhan.com/showinfo-26-100986-0.html餓了么面試官：實(shí)現(xiàn)一下 Element-UI 官網(wǎng)的主題切換動(dòng)畫！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： VueConf 2024 落幕，7大模塊講解 Vue 未來(lái)生態(tài)變化！
下一篇： 想看源碼但是無(wú)從下口怎么辦？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)