vue3+element-plus暗黑模式切換動(dòng)畫(huà)圓弧過(guò)渡效果
更新時(shí)間：2025年01月10日 10:52:10 作者：Cheng Lucky
文章介紹了如何在Vue 3和Element Plus中實(shí)現(xiàn)暗黑模式的切換,并通過(guò)動(dòng)畫(huà)和圓弧過(guò)渡效果提升用戶體驗(yàn),本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
vue3+element-plus暗黑模式切換動(dòng)畫(huà)圓弧過(guò)渡
效果
html
<div class="toggle" ref="switchRef" @click.stop="toggleDark()"> <el-icon v-show="!isDark" :size="30"><Moon /></el-icon> <el-icon v-show="isDark" :size="30"><Sunny /></el-icon> </div>
ts
import { useDark } from '@vueuse/core';
const isDark = useDark();
//獲取切換元素的ref
const switchRef = ref<HTMLElement>();
const toggleDark = () => {
// 若瀏覽器不支持 View Transitions
if (!document.startViewTransition) {
return true;
}
return new Promise(resolve => {
const switchEl = switchRef.value as HTMLElement;
const rect = switchEl.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
const transition = document.startViewTransition(() => {
resolve(true);
});
transition.ready.then(() => {
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`];
document.documentElement.animate(
{
clipPath,
},
{
duration: 400,
easing: 'ease-in',
pseudoElement: '::view-transition-new(root)',
}
);
isDark.value = !isDark.value;
});
});
};到此這篇關(guān)于vue3+element-plus暗黑模式切換動(dòng)畫(huà)圓弧過(guò)渡效果的文章就介紹到這了,更多相關(guān)vue element-plus暗黑模式切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue進(jìn)入頁(yè)面時(shí)滾動(dòng)條始終在底部代碼實(shí)例
這篇文章主要介紹了vue進(jìn)入頁(yè)面時(shí)滾動(dòng)條始終在底部，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的方法
這篇文章主要給大家介紹了關(guān)于vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,前端使用這個(gè)插件可以方便展現(xiàn)出json格式的數(shù)據(jù),下載引入使用代碼可直接使用,需要的朋友可以參考下2024-05-05
針對(duì)Vue文檔中部分大家可能不會(huì)去研讀的內(nèi)容，這篇文章主要介紹了詳解Vue文檔中幾個(gè)易忽視部分的剖析，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-03-03
vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長(zhǎng)度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了Vue.js 加入高德地圖的實(shí)現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
本篇文章主要介紹了深入理解vue $refs的基本用法 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07