‘纯css实现Material Design中的水滴动画按钮’的js体验优化

xiaoqibTn 发布于2019-08-23 12:28 / 664人阅读

摘要：前言在上一篇，我们已经实现了用纯实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。

前言

在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。

以下所有基础代码均来自上一篇

css中只能做到固定的点扩散

无法避免的js

虽然我很想通过css来实现想要的效果，毕竟属于UI交互方面，尽量别扯上js，无奈后劲不足，很多功能确实无法实现，比如获取鼠标位置，这个css就真没辙了。

思考了很久，还是只能通过js来获取位置坐标了，但是我们可以减少js的逻辑，我们只需要知道坐标即可，剩下的给css来做就好了。

实现思路 css新特性

其实用的css很多新特性的话，很多以前只能通过js来实现的css也可以代替了。

css原生变量var，大家平时应该都接触过了吧。可能平时由于兼容性的问题，用起来缩手缩脚，干脆为了兼容性就不用了

其实只要不考虑IE的话兼容性还是可以的，就算要兼顾IE，可以保证按钮是完好的，只是没有动画效果不就可以了吗，这也是所谓的优雅降级吧

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;

具体实现

我们需要在点击的时候获取到左边，然后存在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%); 
}

这里我们解决了两个问题，

首次进来会触发一次：这里我们把left给了一个默认值-100%

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

也就是说，当前面的--x没有值或者非法的时候就会取后面一个值，-100%会让水滴动画的过程在视线之外触发，页面上根本看不见。

跟随鼠标点击的位置扩散：现在已经获取到了鼠标的位置，所以就很容易实现了鼠标在哪点击就从哪里扩散的问题

完整demo

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

小节

其实js实现是很简单的，css才是难点，css远比js灵活的多。比方说积木，积木的各种小零件是固定的，种类也有限，但是你可以组合出各种不同的玩具出来，可以称之为头脑创意吧，然而你组合出来一辆小汽车，却没法自动行驶，那么你就需要用上电机模组了，这是功能驱动。实际上在研发积木的过程中才是最耗费心思的地方，那些动力系统才是一层不变的。

混合云私有云 material-design material-design-lite js实现gif动画 js 实现提交按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98569.html

‘纯css实现Material Design中的水滴动画按钮’的js体验优化

摘要：前言在上一篇，我们已经实现了用纯实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。前言在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今...

genefy 2019-08-29 17:02 评论0 收藏0
纯css实现Material Design中的水滴动画按钮

摘要：但是往往要引入一大堆和，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些库就显得有些过于庞大了，同时由于是实现，很多时候还要注意加载问题。前言大家平时应该经常见到这种特效，很炫酷不是吗 showImg(https://segmentfault.com/img/remote/1460000016740061?w=318&h=190); 这是谷歌Material D...

lolomaco 2019-08-29 17:01 评论0 收藏0
纯css实现Material Design中的水滴动画按钮

摘要：但是往往要引入一大堆和，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些库就显得有些过于庞大了，同时由于是实现，很多时候还要注意加载问题。前言大家平时应该经常见到这种特效，很炫酷不是吗 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插件

摘要：插件介绍是一款纯漂亮的和美化效果。可以和多种字体图标结合使用，对原生的和进行美化，还可以制作按钮点击时的动画效果。支持的图标库有安装可以使用，或来安装。插件介绍 pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和radio进行美化，还可以制作按钮点击时的动画效果。 showImg(...

eechen 2019-08-30 15:44 评论0 收藏0
Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0