CSS變量對JS交互組件開發(fā)帶來的提升與變革示例代碼詳解
我要評論一、CSS變量帶來的質(zhì)變
CSS變量帶來的提升絕不僅僅是節(jié)約點CSS代碼，以及降低CSS開發(fā)和維護成本。
更重要的是，把組件中眾多的交互開發(fā)從原來的JS轉(zhuǎn)移到了CSS代碼中，讓組件代碼更簡潔，同時讓視覺表現(xiàn)實現(xiàn)更加靈活了。
我們通過幾個案例來說明這一變化。
二、簡化了JS對DOM設(shè)置的介入
案例1：loading進度效果
例如實現(xiàn)下圖所示的變量效果：
外面有一層背景層，然后里面有進度條，還有進度值。
在過去，會使用兩層div元素，然后JS去改變里面有顏色條條的寬度，同時設(shè)置進度值。
也就是，loading的進度效果和進度值全部都是JS直接設(shè)置的，JS同時對應(yīng)多個HTML信息。
現(xiàn)在，有了CSS變量，JS所做的工作就非常簡單，僅僅在容器元素上設(shè)置loading進度值即可，其他什么都不需要做，至于樣式表現(xiàn)，或者進度值如何顯示，全部都是CSS的事情。
相關(guān)代碼如下：
<label>圖片1：</label> <div class="bar" style="--percent: 60;"></div> <label>圖片2：</label> <div class="bar" style="--percent: 40;"></div> <label>圖片3：</label> <div class="bar" style="--percent: 20;"></div>
.bar {
height: 20px; width: 300px;
background-color: #f5f5f5;
}
.bar::before {
display: block;
counter-reset: progress var(--percent);
content: counter(progress) '%\2002';
width: calc(1% * var(--percent));
color: #fff;
background-color: #2486ff;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
可以看到，我們只需要一層div標(biāo)簽，DOM層級簡單了，然后，需要修改的HTML變化項僅僅是一個 --percent 自定義屬性而已。
眼見為實，您可以狠狠地點擊這里： CSS百分比變量與進度條demo
三、CSS變量成為了CSS API接口
過去點擊出現(xiàn)提示，切換等效果都需要JS針對特定的元素進行樣式設(shè)置，現(xiàn)在有了CSS變量，我們只需要一段通用的非常簡單的全局JS就可以了，JS就可以自己玩耍去了，其他效果，全部交給JS處理。
這段JS如下：
/**
* @author zhangxinxu(.com)
* @description 點擊頁面任意位置，標(biāo)記坐標(biāo)位置
*/
document.addEventListener('mousedown', function (event) {
var target = event.target;
var body = document.body;
var html = document.documentElement;
// 設(shè)置自定義屬性值
body.style.setProperty('--pagex', event.pageX);
body.style.setProperty('--pagey', event.pageY);
html.style.setProperty('--clientx', event.clientX);
html.style.setProperty('--clienty', event.clientY);
html.style.setProperty('--scrolly', window.pageYOffset);
target.style.setProperty('--offsetx', event.offsetX);
target.style.setProperty('--offsety', event.offsetY);
target.parentElement.style.setProperty('--target-width', target.clientWidth);
target.parentElement.style.setProperty('--target-height', target.clientHeight);
target.parentElement.style.setProperty('--target-left', target.offsetLeft);
target.parentElement.style.setProperty('--target-top', target.offsetTop);
});
可以看到，JavaScript代碼再也不負(fù)責(zé)任何與交互行為相關(guān)的邏輯，直接變成了工具人，一個單純地傳遞點擊坐標(biāo)位置，以及點擊元素偏移和尺寸信息的工具人。
CSS得到了什么呢？
得到了一個巨大的寶藏，一個隨時可以拿來使用的寶藏。
我想要點擊按鈕的時候有什么花哨的反饋，或者點擊頁面空白也來個創(chuàng)意的交互提示，完全不成問題，隨用隨取，無比方便，無比自由。
可以說，上面這段JS，或者類似的JS代碼是未來web開發(fā)的標(biāo)配。
我們來看看上面的代碼可以實現(xiàn)怎樣的效果。
案例2：按鈕點擊圈圈效果
點擊按鈕的時候有個圈圈放大的效果，圈圈放大的中心點就是點擊的位置。
效果如下GIF所示：
核心CSS代碼如下：
.btn:not([disabled]):active::after {
transform: translate(-50%,-50%) scale(0);
opacity: .3;
transition: 0s;
}
.btn::after {
content: "";
display: block;
position: absolute;
width: 100%; height: 100%;
left: var(--x, 0); top: var(--y, 0);
pointer-events: none;
background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;
transform: translate(-50%,-50%) scale(10);
opacity: 0;
transition: transform .3s, opacity .8s;
}
:active 時候隱藏，同時設(shè)置過渡時間為0。于是，點擊釋放的時候，就會有過渡效果。
大家可以訪問這個地址進行體驗： https://xy-ui.codelabo.cn/docs/#/xy-button
案例3：點擊頁面出現(xiàn)文字效果
又例如，點擊本文頁面任意位置都會出現(xiàn)下圖所示的提示信息。
就是下面上面那段萬能工具人JS加下面這段CSS實現(xiàn)的：
body:active::after {
transform: translate(-50%, -100%);
opacity: 0.5;
transition: 0s;
left: -999px;
}
body::after {
content: 'zhangxinxu.com';
position:fixed;
z-index: 999;
left: calc(var(--clientx, -999) * 1px);
top: calc(var(--clienty, -999) * 1px);
transform: translate(-50%, calc(-100% - 20px));
opacity: 0;
transition: transform .3s, opacity .5s;
}
案例3：兩個按鈕下劃線滑來滑去效果
以前，下圖這種點擊選項卡按鈕，然后下劃線滑來滑去，尺寸還變化效果，使用純CSS實現(xiàn)很考驗功力，幾乎99.99%的開發(fā)都是借助JS去查詢對應(yīng)DOM元素，然后設(shè)置寬高和位置實現(xiàn)的交互效果。
現(xiàn)在，有了工具人JS，只需要一段CSS就可以搞定了，甚至文字的高亮切換都可以純CSS搞定，就是這么神奇。
下面這里的效果就是實現(xiàn)的實時效果（若沒有效果，請訪問原文 張鑫旭 https://www.zhangxinxu.com/wordpress/?p=9477 ）：
點擊任意的選項卡元素，就可以看到下劃線滑到對應(yīng)位置，同時為高亮的效果。
相關(guān)代碼如下：
<div class="yw-tab-tab"> <a href="javascript:" class="yw-tab-a">QQ閱讀</a> <a href="javascript:" class="yw-tab-a">起點讀書</a> <a href="javascript:" class="yw-tab-a">紅袖讀書</a> <a href="javascript:" class="yw-tab-a">飛讀免費小說</a> </div>
.yw-tab-tab {
position: relative;
display: flex;
max-width: 414px;
justify-content: space-between;
border-bottom: 1px solid #717678;
background-color: #fff;
margin: 30px auto;
}
.yw-tab-tab::before,
.yw-tab-tab::after {
position: absolute;
width: calc(var(--target-width, 0) * 1px);
left: calc(var(--target-left, -299) * 1px);
color: #2a80eb;
}
.yw-tab-tab[style]::before,
.yw-tab-tab[style]::after {
content: '';
}
.yw-tab-tab::before {
background-color: currentColor;
height: calc(var(--target-height) * 1px);
mix-blend-mode: overlay;
}
.yw-tab-tab::after {
border-bottom: solid;
bottom: -2px;
transition: left .2s, width .2s;
}
.yw-tab-a {
color: #717678;
padding: 10px 0;
}
如果是移動端訪問，需要 mousedown 事件修改成 touchstart ，我就懶得調(diào)整了。
四、web組件的很多API接口可以拜拜了
以前web組件有一個什么功能，就新增一個API接口，看上去很厲害，實際上，加著加著，API越來越多，組件也越來越重，學(xué)習(xí)成本也越來越高，最后走向了死胡同，變得笨重，迎來了滅亡。
現(xiàn)在，可以改變思路了。
那些與交互表現(xiàn)密切相關(guān)的功能，事實上僅僅在組件容器元素上傳遞CSS自定義屬性就可以了，無需負(fù)責(zé)具體的定位，顯隱，或者樣式變化，全部交給CSS。
因為設(shè)計表現(xiàn)的東西是上層的，靈活的，個性的，應(yīng)該在CSS層面進行駕馭才是合理的，匹配的。
例如上面提到的loading組件，無論是條狀的還是餅狀的都是這樣的處理邏輯，只負(fù)責(zé)傳遞進度值，樣式無需關(guān)心。
又例如滑條框（如下圖Ant Design中的滑條的位置和提示效果）、popup提示框等都可以通過一個CSS自定義屬性完成，JS僅傳參不負(fù)責(zé)UI樣式。
實在太晚了，已經(jīng)0:56了，我就不出demo演示了，大家領(lǐng)會去精神即可。
五、結(jié)語
結(jié)語個鬼大頭啊，眼睛都睜不開了。
總之，交互開發(fā)實現(xiàn)的思路可以發(fā)展轉(zhuǎn)變了，CSS變量，真香！
感謝閱讀，歡迎分享！
然后行文匆忙，迷迷糊糊下碼的字，如有錯誤，歡迎指正。
本文地址： https://www.zhangxinxu.com/wordpress/?p=9477
到此這篇關(guān)于CSS變量對JS交互組件開發(fā)帶來的提升與變革示例代碼詳解的文章就介紹到這了,更多相關(guān)css 變量 js交互組件 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了通過CSS變量修改樣式的方法示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-15
- 當(dāng)Web項目變得越來越大時，他的CSS會變得像天文數(shù)字那么大而且還變得混亂。為了幫助我們解決這個問題，新的CSS變量很快就會出現(xiàn)在主流瀏覽器中，這篇文章主要介紹了你真的2019-01-15
- 這篇文章主要介紹了css文件中的樣式類被覆蓋，js文件中的變量未定義問題的相關(guān)資料,需要的朋友可以參考下2016-04-27