Implement MaterialUI button click animation based on CSS and encapsulate it into a React component

Preface

As a heavy user of front-end frameworks, I will pay great attention to its ecology and integrity when selecting technology. I have developed projects based on frameworks such as vue, react, angular, etc., such as mature UI frameworks such as elementUI, ant-design-vue, iView in the vue ecosystem, and ant-design, materialUI in the react ecosystem. These third-party UI frameworks have greatly reduced the cost and complexity of developing a project, allowing developers to focus more on realizing business logic and service.

However, with the increasing emphasis on user experience, the improvement of interactive experience requirements and the emergence of new standards such as CSS3, the web has become more brilliant, and the implementation of various animations has become very easy. When I was studying the materialUI framework, I was amazed by its interaction. So in order to implement a button click animation similar to materialUI and encapsulate it into my own UI library, I have specially summarized some ideas and hope to discuss them with the vast number of front-end engineers.

text

First, let's take a look at the button click effect of materialUI:

Essentially, it also uses the characteristics of CSS3 animation. I checked the source code and found through clicking that materialUI will animate in different positions according to the click position, which is quite interesting. Let's not talk about such a complicated example first. Let's use the CSS3 solution to achieve a similar effect. The effect achieved by the author is as follows:

The above picture is a Button component that I have encapsulated based on react, so let's implement it step by step.

1. Principle

The principle of this animation is actually very simple. It is to use the transition animation of CSS3 and the ::after pseudo object to achieve it. When clicking, the element will activate the :active pseudo class. Then we can animate the background on the ::after pseudo object based on this pseudo class. The pseudo code is as follows:

.xButton { 
  position: relative; 
  overflow: hidden; 
  display: inline-block; 
  padding: 6px 1em; 
  border-radius: 4px; 
  color: #fff; 
  background-color: #000; 
  user-select:none; // Prevent users from selecting 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; 
  } 
}

The above code implements the water ripple animation by setting the scale and transparency of the transform and setting a gradient radial background image. In order to achieve a more elegant animation, the above CSS animation can be implemented with the help of the online tool cubic-bezier, which can generate various forms of Bezier curves. The tool looks like this:

2. Component design ideas

Although the above code can achieve a button click animation effect, it is not universal and does not conform to the style of an experienced programmer, so we will encapsulate it step by step into a universal button component so that it can be used everywhere.

The design idea of ​​the component is based on the ant-design model. Based on the opening and closing principle, we know that an extensible button component generally has the following characteristics:

• Allow users to modify button styles
• Expose button event methods to the outside world
• Provide button theme and appearance configuration
• Pluggable and combinable Based on the above points, let's design this react component.

3. Specific implementation of button component based on react and css3

First of all, our components are implemented using react. For technical points, I will use the more popular umi scaffolding, classnames library and css Module. The code is very simple. Let's take a look.

import classnames from 'classnames' 
import styles from './index.less' 
 
/** 
 * @param {onClick} func Externally exposed click event * @param {className} string Custom class name * @param {type} string Button type primary | warning | info | default | pure 
 * @param {shape} string button shape circle | radius (default) 
 * @param {block} boolean button display true | false (default) 
 */ 
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> 
}

This is the js part of button, which is also the core of component design. Button component exposes props such as onCpck, className, type, shape, and block. className is used to modify the component class name to control the component style. type is mainly used to control the style of the component, similar to the primary style of antd. shape is used to control whether it is a round button or a rounded button. block is used to control whether the button is a block. The specific form is as follows:

The optimized CSS looks like this:

.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; // Prevent users from selecting 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%); 
    } 
  } 
 
  // shape&.circle { 
    border-radius: 1.5em; 
  } 
 
  // Adapt to its parent element&.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; 
    //Set the initial state transition: 0s; 
  } 
}

We achieve the switching of button styles entirely by using the high flexibility brought by the CSS module, which makes the attributes and class names highly associated. Next, let's see how to use it!

// 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> 
  ) 
}

The button styles we saw before were generated by the above code. Isn't it simple? Let's take a look at the click effect again:

In fact, it is not just React. We can use the same principle to implement a Vue version of a button component or an Angular version of a component. It becomes just syntax. Such component design ideas and elements are officially used in many UI libraries, such as the single responsibility principle, the opening and closing principle of components, decentralization, composability, etc. I hope it will be helpful for everyone to design components in the future.

This is the end of this article about using pure CSS to create a MaterialUI-like button click animation and encapsulating it into a React component. For more related CSS MaterialUI button click animation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!