服务器之家

服务器之家 > 正文

如何用纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件

时间:2021-11-09 20:55     来源/作者:趣谈前端

如何用纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件

前言

作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化.

但随着对用户体验的越来越重视,对交互体验要求的提高以及css3等新标准的出现,使得web更加大放异彩, 各种动效的实现都变得非常容易.笔者在研究materialUI框架时对于它的交互及其赞叹.所以为了自己能实现一个类似materialUI的按钮点击动画,并封装到自己的UI库中,笔者特地总结了一些思路,希望可以和广大的前端工程师们一起探讨.

正文

首先我们看一下materialUI的按钮点击效果:

如何用纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件

本质上也是用了css3动画的特性, 笔者查看源代码和通过点击发现materialUI会根据点击位置不同而作不同位置的动画,这个有点意思.我们先不讲这么复杂的例子,下面通过css3的方案来实现一个类似的效果.笔者实现的效果如下:

如何用纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件

上图已经是笔者基于react封装好的一个按钮Button组件,那么我们就先一步步实现它吧.

1. 原理

这个动效的原理其实也很简单,就是利用css3的transition过渡动画,配合::after伪对象就可以实现,点击的时候由于元素会激活:active伪类, 然后我们基于这个伪类, 在::after伪对象上做背景的动画即可. 伪代码如下:

  1. .xButton{
  2. position:relative;
  3. overflow:hidden;
  4. display:inline-block;
  5. padding:6px1em;
  6. border-radius:4px;
  7. color:#fff;
  8. background-color:#000;
  9. user-select:none;//禁止用户选中
  10. cursor:pointer;
  11. }
  12. .ripple{
  13. &::after{
  14. content:"";
  15. display:block;
  16. position:absolute;
  17. width:100%;
  18. height:100%;
  19. top:0;
  20. left:0;
  21. background-image:radial-gradient(circle,#fff10%,transparent11%);
  22. background-repeat:no-repeat;
  23. background-position:50%;
  24. transform:scale(12,12);
  25. opacity:0;
  26. transition:transform.6scubic-bezier(.75,.23,.43,.82),opacity.6s;
  27. }
  28. &:active::after{
  29. transform:scale(0,0);
  30. opacity:.5;
  31. }
  32. }

以上代码就是通过设置transform的scale以及透明度, 并且设置一个渐变的径向背景图像来实现水波纹动画的为了实现更优雅的动画,上面的css动画的实现可以借助cubic-bezier这个在线工具,他可以生成各种不同形式的贝塞尔曲线.工具长这样:

如何用纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件

2. 组件设计思路

仅仅用上述代码虽然可以实现一个按钮点击的动画效果,但是并不通用, 也不符合作为一个经验丰富的程序员的风格,所以接下来我们要一步步把它封装成一个通用的按钮组件,让它无所不用.

组件的设计思路我这里参考ant-design的模式, 基于开闭原则,我们知道一个可扩展的按钮组件一般都具备如下特点:

  • 允许用户修改按钮样式
  • 对外暴露按钮事件方法
  • 提供按钮主题和外形配置
  • 可插拔,可组合 基于以上几点,我们来设计这个react组件.

3. 基于react和css3的button组件具体实现

首先,我们的组件是采用react实现, 技术点我会采用比较流行的umi脚手架, classnames库以及css Module, 代码很简单, 我们来看看吧.

  1. importclassnamesfrom'classnames'
  2. importstylesfrom'./index.less'
  3. /**
  4. *@param{onClick}func对外暴露的点击事件
  5. *@param{className}string自定义类名
  6. *@param{type}string按钮类型primary|warning|info|default|pure
  7. *@param{shape}string按钮形状circle|radius(默认)
  8. *@param{block}boolean按钮展示true|false(默认)
  9. */
  10. exportdefaultfunctionButton(props){
  11. let{children,onClick,className,type,shape,block}=props
  12. return
  13. className={classnames(styles.xButton,styles.ripple,styles[type],styles[shape],block?styles.block:'',className)}
  14. onClick={onClick}
  15. >
  16. {children}
  17. }

这是button的js部分,也是组件设计的核心, 按钮组件对外暴露了onClick, className, type, shape, block这几个props, className用于修改组件类名以便控制组件样式, type主要是控制组件的风格, 类似于antd的primary等样式, shape用来控制是否是圆形按钮还是圆角按钮, block用来控制按钮是否是块.具体形式如下:

如何用纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件

经过优化后的css长这样:

  1. .xButton{
  2. box-sizing:border-box;
  3. display:inline-block;
  4. padding:6px1em;
  5. border-radius:4px;
  6. color:#fff;
  7. font-family:inherit;
  8. background-color:#000;
  9. user-select:none;//禁止用户选中
  10. cursor:pointer;
  11. text-align:center;
  12. &.primary{
  13. background-color:#09f;
  14. }
  15. &.warning{
  16. background-color:#F90;
  17. }
  18. &.info{
  19. background-color:#C03;
  20. }
  21. &.pure{
  22. border:1pxsolid#ccc;
  23. color:rgba(0,0,0,0.65);
  24. background-color:#fff;
  25. &::after{
  26. background-image:radial-gradient(circle,#ccc10%,transparent11%);
  27. }
  28. }
  29. //形状
  30. &.circle{
  31. border-radius:1.5em;
  32. }
  33. //适应其父元素
  34. &.block{
  35. //width:100%;
  36. display:block;
  37. }
  38. }
  39. .ripple{
  40. position:relative;
  41. overflow:hidden;
  42. &::after{
  43. content:"";
  44. display:block;
  45. position:absolute;
  46. width:100%;
  47. height:100%;
  48. top:0;
  49. left:0;
  50. pointer-events:none;
  51. background-image:radial-gradient(circle,#fff10%,transparent11%);
  52. background-repeat:no-repeat;
  53. background-position:50%;
  54. transform:scale(12,12);
  55. opacity:0;
  56. transition:transform.6s,opacity.6s;
  57. }
  58. &:active::after{
  59. transform:scale(0,0);
  60. opacity:.3;
  61. //设置初始状态
  62. transition:0s;
  63. }
  64. }
  65. 复制代码

我们实现按钮样式的切换完全是用css module带来的高灵活性, 使其让属性和类名高度关联. 接下来看看我们如何使用吧!

  1. //index.js
  2. import{Button}from'@/components'
  3. importstylesfrom'./index.css'
  4. exportdefaultfunction(){
  5. return(
  6. default
  7. "warning">warning
  8. "primary">primary
  9. "info">info
  10. "pure">pure
  11. "primary"shape="circle">circle
  12. "primary"block>primary&block
  13. "warning"shape="circle"blockonClick={()=>{alert('block')}}>circle&block
  14. )
  15. }

之前我们看到的按钮样式就是通过如上代码生成的,是不是很简单呢? 来我们再次看看点击的动效:

如何用纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件

其实不仅仅是react, 我们使用同样的原理也可以实现一个vue版的按钮组件或者一个angular版的组件,变得只是语法而已.这样的组件设计思路和元素被官方用在很多ui库中, 比如单一职责原理, 组件的开闭原则, 去中心,可组合等,希望对大家今后设计组件有所帮助。

原文链接:https://mp.weixin.qq.com/s/12RK-qqnXKxawZMIa_ViRA

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部