成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

‘純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕’的js體驗(yàn)優(yōu)化

xiaoqibTn / 795人閱讀

摘要：前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今天我們來(lái)解決這個(gè)問(wèn)題。

前言

在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純css實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今天我們來(lái)解決這個(gè)問(wèn)題。

以下所有基礎(chǔ)代碼均來(lái)自上一篇

css中只能做到固定的點(diǎn)擴(kuò)散

無(wú)法避免的js

雖然我很想通過(guò)css來(lái)實(shí)現(xiàn)想要的效果，畢竟屬于UI交互方面，盡量別扯上js，無(wú)奈后勁不足，很多功能確實(shí)無(wú)法實(shí)現(xiàn)，比如獲取鼠標(biāo)位置，這個(gè)css就真沒(méi)轍了。

思考了很久，還是只能通過(guò)js來(lái)獲取位置坐標(biāo)了，但是我們可以減少js的邏輯，我們只需要知道坐標(biāo)即可，剩下的給css來(lái)做就好了。

實(shí)現(xiàn)思路 css新特性

其實(shí)用的css很多新特性的話，很多以前只能通過(guò)js來(lái)實(shí)現(xiàn)的css也可以代替了。

css原生變量var，大家平時(shí)應(yīng)該都接觸過(guò)了吧?？赡芷綍r(shí)由于兼容性的問(wèn)題，用起來(lái)縮手縮腳，干脆為了兼容性就不用了

其實(shí)只要不考慮IE的話兼容性還是可以的，就算要兼顧IE，可以保證按鈕是完好的，只是沒(méi)有動(dòng)畫效果不就可以了嗎，這也是所謂的優(yōu)雅降級(jí)吧

var的用法很簡(jiǎn)單

:root {
    --main-bg-color: red;
}
.container {
    width: 20px;
    height: 20px;
    background-color: var(--main-bg-color);/**background-color:red**/
}

有關(guān)var的詳細(xì)用法，大家可以自行百度

全能js

我們用js只有一個(gè)目的，就是獲取鼠標(biāo)點(diǎn)擊的位置

很簡(jiǎn)單，事件對(duì)象event中有個(gè)offsetX和offsetY就是用來(lái)描述鼠標(biāo)位置相對(duì)于父元素的位置

其實(shí)這個(gè)屬性早些年是IE私有的，谷歌和火狐看著好用，不知道從上面版本也都支持了，所以兼容性沒(méi)太大問(wèn)題~

var x = event.offsetX;
var y = event.offsetY;
具體實(shí)現(xiàn)

我們需要在點(diǎn)擊的時(shí)候獲取到左邊，然后存在css變量中

示例代碼

function ripple(ev){
  var x = ev.offsetX;
  var y = ev.offsetY;
  this.style.setProperty("--x",x+"px");
  this.style.setProperty("--y",y+"px");
}

沒(méi)錯(cuò)，就這么一丁點(diǎn)js

相應(yīng)的css部分我們要拿到我們保存的變量，來(lái)改變中心點(diǎn)的位置

.btn>span:after{ 
  content: ""; 
  position: absolute; 
  background: transparent; 
  border-radius:50%; 
  width: 100%; 
  padding-top: 100%; 
  margin-left: -50%; 
  margin-top: -50%; 
  left: var(--x,-100%); 
  top: var(--y,-100%); 
}

這里我們解決了兩個(gè)問(wèn)題，

首次進(jìn)來(lái)會(huì)觸發(fā)一次：這里我們把left給了一個(gè)默認(rèn)值-100% 

left: var(--x,-100%);

也就是說(shuō)，當(dāng)前面的--x沒(méi)有值或者非法的時(shí)候就會(huì)取后面一個(gè)值，-100%會(huì)讓水滴動(dòng)畫的過(guò)程在視線之外觸發(fā)，頁(yè)面上根本看不見。

跟隨鼠標(biāo)點(diǎn)擊的位置擴(kuò)散：現(xiàn)在已經(jīng)獲取到了鼠標(biāo)的位置，所以就很容易實(shí)現(xiàn)了鼠標(biāo)在哪點(diǎn)擊就從哪里擴(kuò)散的問(wèn)題

完整demo

https://codepen.io/xboxyan/pe...

小節(jié)

其實(shí)js實(shí)現(xiàn)是很簡(jiǎn)單的，css才是難點(diǎn)，css遠(yuǎn)比js靈活的多。比方說(shuō)積木，積木的各種小零件是固定的，種類也有限，但是你可以組合出各種不同的玩具出來(lái)，可以稱之為頭腦創(chuàng)意吧，然而你組合出來(lái)一輛小汽車，卻沒(méi)法自動(dòng)行駛，那么你就需要用上電機(jī)模組了，這是功能驅(qū)動(dòng)。實(shí)際上在研發(fā)積木的過(guò)程中才是最耗費(fèi)心思的地方，那些動(dòng)力系統(tǒng)才是一層不變的。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98569.html

相關(guān)文章

  • ‘純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕’的js體驗(yàn)優(yōu)化

    摘要：前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今天我們來(lái)解決這個(gè)問(wèn)題。 前言 在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純css實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今...

    genefy 評(píng)論0 收藏0

  • 純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕

    摘要：但是往往要引入一大堆和，其實(shí)在已有的項(xiàng)目中，可能只是想加一個(gè)這樣的按鈕，來(lái)增強(qiáng)用戶體驗(yàn)，這些庫(kù)就顯得有些過(guò)于龐大了，同時(shí)由于是實(shí)現(xiàn)，很多時(shí)候還要注意加載問(wèn)題。 前言 大家平時(shí)應(yīng)該經(jīng)常見到這種特效，很炫酷不是嗎 showImg(https://segmentfault.com/img/remote/1460000016740061?w=318&h=190); 這是谷歌Material D...

    lolomaco 評(píng)論0 收藏0

  • 純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕

    摘要：但是往往要引入一大堆和，其實(shí)在已有的項(xiàng)目中，可能只是想加一個(gè)這樣的按鈕，來(lái)增強(qiáng)用戶體驗(yàn)，這些庫(kù)就顯得有些過(guò)于龐大了，同時(shí)由于是實(shí)現(xiàn)，很多時(shí)候還要注意加載問(wèn)題。 前言 大家平時(shí)應(yīng)該經(jīng)常見到這種特效，很炫酷不是嗎 showImg(https://segmentfault.com/img/remote/1460000016740061?w=318&h=190); 這是谷歌Material D...

    ispring 評(píng)論0 收藏0

  • 純css3漂亮的checkbox和radio美化效果插件Pretty.css插件

    摘要：插件介紹是一款純漂亮的和美化效果。可以和多種字體圖標(biāo)結(jié)合使用，對(duì)原生的和進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動(dòng)畫效果。支持的圖標(biāo)庫(kù)有安裝可以使用，或來(lái)安裝。 插件介紹 pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標(biāo)結(jié)合使用，對(duì)原生的checkbox和radio進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動(dòng)畫效果。 showImg(...

    eechen 評(píng)論0 收藏0

  • Vue 2019開發(fā)者圖譜

    摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開發(fā)者知識(shí)圖譜，它包含了所有開發(fā)過(guò)程中的關(guān)鍵部分。在數(shù)據(jù)展示前端導(dǎo)入導(dǎo)出圖表面板數(shù)據(jù)綁定等場(chǎng)景無(wú)需大量代碼開發(fā)和測(cè)試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。 作為 Vue 的初學(xué)者，您或許已經(jīng)聽過(guò)很多關(guān)于它的專業(yè)術(shù)語(yǔ)了，例如：?jiǎn)雾?yè)面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽過(guò)和Vue經(jīng)常一起被提到的工具和庫(kù)，如Vuex、Webp...

    cgspine 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<