基于CSS实现MaterialUI按钮点击动画并封装成 React 组件

前言

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

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

正文

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

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

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

1. 原理

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

.xButton {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 6px 1em;
  border-radius: 4px;
  color: #fff;
  background-color: #000;
  user-select:none;   // 禁止用户选中
  cursor: pointer;
} 

.ripple {
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(circle, #fff 10%, transparent 11%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(12, 12);
    opacity: 0;
    transition: transform .6s cubic-bezier(.75,.23,.43,.82), opacity .6s;
  }
  &:active::after {
    transform: scale(0, 0);
    opacity: .5;
  }
} 

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

2. 组件设计思路

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

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

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

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

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

import classnames from 'classnames'
import styles from './index.less' 

/**
 * @param {onClick} func 对外暴露的点击事件
 * @param {className} string 自定义类名
 * @param {type} string 按钮类型 primary | warning | info | default | pure
 * @param {shape} string 按钮形状 circle | radius(默认)
 * @param {block} boolean 按钮展示 true | false(默认)
 */
export default function Button(props) {
  let { children, onClick, className, type, shape, block } = props
  return <div
            className={classnames(styles.xButton, styles.ripple, styles[type], styles[shape], block ? styles.block : '', className)}
            onClick={onClick}
        >
            { children }
        </div>
} 

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

经过优化后的css长这样:

.xButton {
  box-sizing: border-box;
  display: inline-block;
  padding: 6px 1em;
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  background-color: #000;
  user-select:none;   // 禁止用户选中
  cursor: pointer;
  text-align: center;
  &.primary {
    background-color: #09f;
  }
  &.warning {
    background-color: #F90;
  }
  &.info {
    background-color: #C03;
  }
  &.pure {
    border: 1px solid #ccc;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    &::after {
      background-image: radial-gradient(circle, #ccc 10%, transparent 11%);
    }
  } 

  // 形状
  &.circle {
    border-radius: 1.5em;
  } 

  // 适应其父元素
  &.block {
    // width: 100%;
    display: block;
  }
} 

.ripple {
  position: relative;
  overflow: hidden;
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 11%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(12, 12);
    opacity: 0;
    transition: transform .6s, opacity .6s;
  }
  &:active::after {
    transform: scale(0, 0);
    opacity: .3;
    //设置初始状态
    transition: 0s;
  }
} 

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

// index.js
import { Button } from '@/components'
import styles from './index.css'
export default function() {
  return (
    <div className={styles.normal}>
      <Button className={styles.btn}>default</Button>
      <Button className={styles.btn} type="warning">warning</Button>
      <Button className={styles.btn} type="primary">primary</Button>
      <Button className={styles.btn} type="info">info</Button>
      <Button className={styles.btn} type="pure">pure</Button>
      <Button className={styles.btn} type="primary" shape="circle">circle</Button>
      <Button className={styles.mb16} type="primary" block>primary&block</Button>
      <Button type="warning" shape="circle" block onClick={() => { alert('block')}}>circle&block</Button>
    </div>
  )
} 

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

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

到此这篇关于纯 CSS 打造类 MaterialUI 的按钮点击动画并封装成 React 组件的文章就介绍到这了,更多相关css MaterialUI 按钮点击动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React Native 通告消息竖向轮播组件的封装

    本文实例为大家分享了React Native通告消息竖向轮播组件的封装代码,供大家参考,具体内容如下 import React, {Component} from 'react' import { Text, View, Animated, Easing, StyleSheet, } from 'react-native' export default class ScrollVertical extends Component { static defaultProps = { enableA

  • React Native开发封装Toast与加载Loading组件示例

    在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Native官方并没有提供者这两个常用组件,需要开发者自己根据需求来自定义.作者就在其他组件的基础上在进行二次封装,使用起来更加简单,更具扩展性,同学们只需将Toast与Loading文件拖到项目中,install对应的组件库即可 效果图 Toast和Loading Demo地址 https://github.com/guangqiang-liu/react-native-

  • React教程之封装一个Portal可复用组件的方法

    Portal简介 所以我们需要的一个通用组件,它做如下的事情: 可以声明式的写在一个组件中 并不真正render在被声明的地方 支持过渡动画 那么,像modal.tooltip.notification等组件都是可以基于这个组件的.我们叫这个组件为Portal. 使用了React16+的你,对Portal至少有所了解或者熟练使用. Portal可以创建一个在你的root元素之外的DOM. 1.通常你的网站只有一个root <body> <div id="root"&g

  • React Form组件的实现封装杂谈

    前言 对于网页系统来说,表单提交是一种很常见的与用户交互的方式,比如提交订单的时候,需要输入收件人.手机号.地址等信息,又或者对系统进行设置的时候,需要填写一些个人偏好的信息. 表单提交是一种结构化的操作,可以通过封装一些通用的功能达到简化开发的目的.本文将讨论Form表单组件设计的思路,并结合有赞的ZentForm组件介绍具体的实现方式.本文所涉及的代码都是基于React v15的版本. Form组件功能 一般来说,Form组件的功能包括以下几点: 表单布局 表单字段 封装表单验证&错误提示

  • 基于CSS实现MaterialUI按钮点击动画并封装成 React 组件

    前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化. 但随着对用户体验的越来越重视,对交互体验要求的提高以及css3等新标准的出现,使得web更加

  • 微信小程序按钮点击动画效果的实现

    动画效果如下: GIF看起来可能会有点卡 wxml <view class="confirm bubble">确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{

  • 基于jquery实现左右按钮点击的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示. 2.html结构分析 <div class="activity" id="activity-slide"> <a href

  • 基于jquery css3实现点击动画弹出表单源码特效

    下图给大家展示了使用jquery css实现的点击动画弹出表单源码,有上传表单.删除表单.发送评论表单,都是通过鼠标点击图标按钮动画弹出的表单源码特效. 效果图展示如下: 在线预览    源码下载 html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog&q

  • vue基于websocket实现智能聊天及吸附动画效果

    目录 前言: 1.效果如下: 2.主要功能: 2.1.基于websocket实现聊天功能,封装了一个socket.js文件 2.2使用Jwchat插件实现类似QQ.微信电脑端的功能 2.3动画效果(如关闭打开时动画.吸附效果及其他效果) 3.实现步骤: 3.1.实现websocket聊天功能 3.2.在页面中的使用方法: 关闭连接 发送给后端的方法 4.使用Jwchat插件实现类似QQ.微信电脑端的功能 4.1步骤 5.动画效果 前言: 发现这篇文章写的有点多,我总结一下整体思路: 首先这个功能

  • jQuery实现按钮点击遮罩加载及处理完后恢复的效果

    本文实例讲述了jQuery实现按钮点击遮罩加载及处理完后恢复的效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx.cs" Inherits="EasyUiLoad" %> <!DOCTYPE html PUBLIC "-//W3C//D

  • js实现按钮颜色渐变动画效果

    本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&

  • Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解

    先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里. 代码在这https://github.com/zgzczzw/ZHFollowButton 前几天发现知乎关注的点击效果确实赞,查了一下实现方式,刚好看到这个问题,花了一天时间终于把这个效果实现了,现在来回答一下,很不幸,楼上各位的答案都不全对,且听我一一道来. 首先,我先详细观察了一些知乎的效果,其中有一个很神奇的地方,如图: 注意看第二张图,这个圆形在扩散的时候,圆形底下的字还在,而且新的

  • 基于Angular.js实现的触摸滑动动画实例代码

    先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="

  • 详解Android实现购物车页面及购物车效果(点击动画)

    本文介绍了Android实现购物车页面及购物车效果(点击动画),分享给大家,具体如下: 效果图如下: 思路: (1)思考每个条目中的数字的更新原理. (2)购物车的动画效果. (3)购物清单怎么显示(这个我暂时没有写,如果需要的话,可以在我的简书下给我留言). 1.因为进入页面,所有的商品个数都显示为零,所以我用 ArrayList<HashMap<String, Object>> data,把商品集合都附上零: //下面把data都添加0,为了刚开始显示时,显示的是0 for (

随机推荐