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

genefy 發(fā)布于2019-08-29 17:02 / 519人閱讀

摘要：前言在上一篇，我們已經(jīng)實現(xiàn)了用純實現(xiàn)水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據(jù)鼠標的位置來擴散，今天我們來解決這個問題。

前言

在上一篇，我們已經(jīng)實現(xiàn)了用純css實現(xiàn)水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據(jù)鼠標的位置來擴散，今天我們來解決這個問題。

以下所有基礎代碼均來自上一篇

css中只能做到固定的點擴散

無法避免的js

雖然我很想通過css來實現(xiàn)想要的效果，畢竟屬于UI交互方面，盡量別扯上js，無奈后勁不足，很多功能確實無法實現(xiàn)，比如獲取鼠標位置，這個css就真沒轍了。

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

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

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

css原生變量var，大家平時應該都接觸過了吧?？赡芷綍r由于兼容性的問題，用起來縮手縮腳，干脆為了兼容性就不用了

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

var的用法很簡單

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

有關var的詳細用法，大家可以自行百度

全能js

我們用js只有一個目的，就是獲取鼠標點擊的位置

很簡單，事件對象event中有個offsetX和offsetY就是用來描述鼠標位置相對于父元素的位置

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

var x = event.offsetX;
var y = event.offsetY;

具體實現(xiàn)

我們需要在點擊的時候獲取到左邊，然后存在css變量中

示例代碼

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

沒錯，就這么一丁點js

相應的css部分我們要拿到我們保存的變量，來改變中心點的位置

.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%); 
}

這里我們解決了兩個問題，

首次進來會觸發(fā)一次：這里我們把left給了一個默認值-100%

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

也就是說，當前面的--x沒有值或者非法的時候就會取后面一個值，-100%會讓水滴動畫的過程在視線之外觸發(fā)，頁面上根本看不見。

跟隨鼠標點擊的位置擴散：現(xiàn)在已經(jīng)獲取到了鼠標的位置，所以就很容易實現(xiàn)了鼠標在哪點擊就從哪里擴散的問題

完整demo

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

小節(jié)

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

云服務器 GPU云服務器 material-design material-design-lite js實現(xiàn)gif動畫 js 實現(xiàn)提交按鈕

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

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

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

摘要：前言在上一篇，我們已經(jīng)實現(xiàn)了用純實現(xiàn)水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據(jù)鼠標的位置來擴散，今天我們來解決這個問題。前言在上一篇，我們已經(jīng)實現(xiàn)了用純css實現(xiàn)水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據(jù)鼠標的位置來擴散，今...

xiaoqibTn 2019-08-23 12:28 評論0 收藏0
純css實現(xiàn)Material Design中的水滴動畫按鈕

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

lolomaco 2019-08-29 17:01 評論0 收藏0
純css實現(xiàn)Material Design中的水滴動畫按鈕

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

ispring 2019-08-02 11:44 評論0 收藏0
純css3漂亮的checkbox和radio美化效果插件Pretty.css插件

摘要：插件介紹是一款純漂亮的和美化效果?？梢院投喾N字體圖標結合使用，對原生的和進行美化，還可以制作按鈕點擊時的動畫效果。支持的圖標庫有安裝可以使用，或來安裝。插件介紹 pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標結合使用，對原生的checkbox和radio進行美化，還可以制作按鈕點擊時的動畫效果。 showImg(...

eechen 2019-08-30 15:44 評論0 收藏0
Vue 2019開發(fā)者圖譜

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

cgspine 2019-08-23 18:14 評論0 收藏0