一、CSS變量帶來(lái)的質(zhì)變

CSS變量帶來(lái)的提升絕不僅僅是節(jié)約點(diǎn)CSS代碼，以及降低CSS開(kāi)發(fā)和維護(hù)成本。

更重要的是，把組件中眾多的交互開(kāi)發(fā)從原來(lái)的JS轉(zhuǎn)移到了CSS代碼中，讓組件代碼更簡(jiǎn)潔，同時(shí)讓視覺(jué)表現(xiàn)實(shí)現(xiàn)更加靈活了。

我們通過(guò)幾個(gè)案例來(lái)說(shuō)明這一變化。

二、簡(jiǎn)化了JS對(duì)DOM設(shè)置的介入

案例1：loading進(jìn)度效果

例如實(shí)現(xiàn)下圖所示的變量效果：

外面有一層背景層，然后里面有進(jìn)度條，還有進(jìn)度值。

在過(guò)去，會(huì)使用兩層div元素，然后JS去改變里面有顏色條條的寬度，同時(shí)設(shè)置進(jìn)度值。

也就是，loading的進(jìn)度效果和進(jìn)度值全部都是JS直接設(shè)置的，JS同時(shí)對(duì)應(yīng)多個(gè)HTML信息。

現(xiàn)在，有了CSS變量，JS所做的工作就非常簡(jiǎn)單，僅僅在容器元素上設(shè)置loading進(jìn)度值即可，其他什么都不需要做，至于樣式表現(xiàn)，或者進(jì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層級(jí)簡(jiǎn)單了，然后，需要修改的HTML變化項(xiàng)僅僅是一個(gè) --percent 自定義屬性而已。

眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里： CSS百分比變量與進(jìn)度條demo

三、CSS變量成為了CSS API接口

過(guò)去點(diǎn)擊出現(xiàn)提示，切換等效果都需要JS針對(duì)特定的元素進(jìn)行樣式設(shè)置，現(xiàn)在有了CSS變量，我們只需要一段通用的非常簡(jiǎn)單的全局JS就可以了，JS就可以自己玩耍去了，其他效果，全部交給JS處理。

這段JS如下：

/**
 * @author zhangxinxu(.com)
 * @description 點(diǎn)擊頁(yè)面任意位置，標(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)的邏輯，直接變成了工具人，一個(gè)單純地傳遞點(diǎn)擊坐標(biāo)位置，以及點(diǎn)擊元素偏移和尺寸信息的工具人。

CSS得到了什么呢？

得到了一個(gè)巨大的寶藏，一個(gè)隨時(shí)可以拿來(lái)使用的寶藏。

我想要點(diǎn)擊按鈕的時(shí)候有什么花哨的反饋，或者點(diǎn)擊頁(yè)面空白也來(lái)個(gè)創(chuàng)意的交互提示，完全不成問(wèn)題，隨用隨取，無(wú)比方便，無(wú)比自由。

可以說(shuō)，上面這段JS，或者類(lèi)似的JS代碼是未來(lái)web開(kāi)發(fā)的標(biāo)配。

我們來(lái)看看上面的代碼可以實(shí)現(xiàn)怎樣的效果。

案例2：按鈕點(diǎn)擊圈圈效果

點(diǎn)擊按鈕的時(shí)候有個(gè)圈圈放大的效果，圈圈放大的中心點(diǎn)就是點(diǎn)擊的位置。

效果如下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í)候隱藏，同時(shí)設(shè)置過(guò)渡時(shí)間為0。于是，點(diǎn)擊釋放的時(shí)候，就會(huì)有過(guò)渡效果。

大家可以訪問(wèn)這個(gè)地址進(jìn)行體驗(yàn)： https://xy-ui.codelabo.cn/docs/#/xy-button

案例3：點(diǎn)擊頁(yè)面出現(xiàn)文字效果

又例如，點(diǎn)擊本文頁(yè)面任意位置都會(huì)出現(xiàn)下圖所示的提示信息。

就是下面上面那段萬(wàn)能工具人JS加下面這段CSS實(shí)現(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：兩個(gè)按鈕下劃線滑來(lái)滑去效果

以前，下圖這種點(diǎn)擊選項(xiàng)卡按鈕，然后下劃線滑來(lái)滑去，尺寸還變化效果，使用純CSS實(shí)現(xiàn)很考驗(yàn)功力，幾乎99.99%的開(kāi)發(fā)都是借助JS去查詢(xún)對(duì)應(yīng)DOM元素，然后設(shè)置寬高和位置實(shí)現(xiàn)的交互效果。

現(xiàn)在，有了工具人JS，只需要一段CSS就可以搞定了，甚至文字的高亮切換都可以純CSS搞定，就是這么神奇。

下面這里的效果就是實(shí)現(xiàn)的實(shí)時(shí)效果（若沒(méi)有效果，請(qǐng)?jiān)L問(wèn)原文 張?chǎng)涡?https://www.zhangxinxu.com/wordpress/?p=9477 ）：

點(diǎn)擊任意的選項(xiàng)卡元素，就可以看到下劃線滑到對(duì)應(yīng)位置，同時(shí)為高亮的效果。

相關(guān)代碼如下：

<div class="yw-tab-tab"> 
  <a href="javascript:" class="yw-tab-a">QQ閱讀</a>
  <a href="javascript:" class="yw-tab-a">起點(diǎn)讀書(shū)</a>
  <a href="javascript:" class="yw-tab-a">紅袖讀書(shū)</a>
  <a href="javascript:" class="yw-tab-a">飛讀免費(fèi)小說(shuō)</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;
}

如果是移動(dòng)端訪問(wèn)，需要 mousedown 事件修改成 touchstart ，我就懶得調(diào)整了。

四、web組件的很多API接口可以拜拜了

以前web組件有一個(gè)什么功能，就新增一個(gè)API接口，看上去很厲害，實(shí)際上，加著加著，API越來(lái)越多，組件也越來(lái)越重，學(xué)習(xí)成本也越來(lái)越高，最后走向了死胡同，變得笨重，迎來(lái)了滅亡。

現(xiàn)在，可以改變思路了。

那些與交互表現(xiàn)密切相關(guān)的功能，事實(shí)上僅僅在組件容器元素上傳遞CSS自定義屬性就可以了，無(wú)需負(fù)責(zé)具體的定位，顯隱，或者樣式變化，全部交給CSS。

因?yàn)樵O(shè)計(jì)表現(xiàn)的東西是上層的，靈活的，個(gè)性的，應(yīng)該在CSS層面進(jìn)行駕馭才是合理的，匹配的。

例如上面提到的loading組件，無(wú)論是條狀的還是餅狀的都是這樣的處理邏輯，只負(fù)責(zé)傳遞進(jìn)度值，樣式無(wú)需關(guān)心。

又例如滑條框（如下圖Ant Design中的滑條的位置和提示效果）、popup提示框等都可以通過(guò)一個(gè)CSS自定義屬性完成，JS僅傳參不負(fù)責(zé)UI樣式。

實(shí)在太晚了，已經(jīng)0:56了，我就不出demo演示了，大家領(lǐng)會(huì)去精神即可。

五、結(jié)語(yǔ)

結(jié)語(yǔ)個(gè)鬼大頭啊，眼睛都睜不開(kāi)了。

總之，交互開(kāi)發(fā)實(shí)現(xiàn)的思路可以發(fā)展轉(zhuǎn)變了，CSS變量，真香！

感謝閱讀，歡迎分享！

然后行文匆忙，迷迷糊糊下碼的字，如有錯(cuò)誤，歡迎指正。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9477

到此這篇關(guān)于CSS變量對(duì)JS交互組件開(kāi)發(fā)帶來(lái)的提升與變革示例代碼詳解的文章就介紹到這了,更多相關(guān)css 變量 js交互組件 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論