preface

As a heavy user of the front-end framework, the technology selection will also pay great attention to its ecology and integrity. The author has developed projects based on vUE, React, Angular and other frameworks, such as elementUI of Biuru Vue ecology, Ant-Design-VUE, iView and other mature UI frameworks, And Ant-Design of React ecology, MaterialUI, these third-party UI frameworks have greatly reduced the cost and complexity of developing a project, enabling developers to focus more on implementing business logic and servitization.

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 shines more and more, and the realization of various dynamic effects becomes very easy. The author praised the interaction of materialUI framework when studying it. Therefore, in order to achieve a similar materialUI button click animation, and encapsulated into their own UI library, the author especially summed up some ideas, hoping to discuss with the majority of front-end engineers.

The body of the

First let’s look at the button click effect of materialUI:

Principle 1.

This motion is actually very simple, is the use of CSS3 transition animation, with ::after pseudo-object can be achieved, click on the element will activate :active pseudo-class, and then we based on this pseudo-class, in the ::after pseudo-object background animation can be. The pseudocode 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;   // Disable user selection
  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; }}Copy the code

For a more elegant animation, the CSS animation above can be implemented using cubic Bezier, an online tool that can generate various forms of Bezier curves. The tool looks like this:

2. Component design ideas

It’s possible to animate a button click with just the above code, but it’s not universal, and it’s not the style of an experienced programmer, so we’re going to wrap it up into a universal button component and make it do everything.

I refer to the ant-Design pattern here. Based on the open closed principle, we know that an extensible button component generally has the following characteristics:

  • Allows the user to modify the button style
  • Expose button event methods externally
  • Provides button theme and appearance configuration
  • Pluggable, combinable We designed the React component based on these points.

3. React and CSS3 based button components concrete implementation

First of all, our component is implemented using React. For technical points, I will use the 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 exposed outside the click event of * @ 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 to show the true | false (the 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>
}
Copy the code

This is the javascript part of a button, which is the core of the component design. The button component contains props for onClick, className, type, shape, and block. ClassName is used to change the className of the component to control the style of the component. Type is the style of the control component, similar to antD primary, shape is used to control whether the button is round or rounded, and block is used to control whether the button is a block. The specific form is as follows:

.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;   // Disable user selection
  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.5 em;
  }

  // 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; }}Copy the code

We implemented the button style switch entirely with the flexibility of the CSS Module, which makes the property highly correlated with the class name. Here’s how we 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>)}Copy the code

The button style we saw earlier was generated from the code above. Isn’t that simple? Let’s look at the action of clicking again:

The last

If you want to know the complete mind map of this article, more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization knowledge and practical front-end, welcome to join us in the public number “Interesting Talk front-end” to learn and discuss, and explore the boundary of the front end.

More recommended

  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • In 2019, take a look at some of my top questions and advice for job seekers
  • Re-encapsulates a real-time preview jsoneditor component based on jsonEditor (React version)
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (middle)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (Part 2)
  • Write a mock data server using nodeJS in 5 minutes
  • “Front-end combat summary” the use of pure CSS website skin and focus diagram switch animation
  • “Front-end combat summary” using CSS3 to achieve cool 3D rotation perspective
  • Add a loading progress bar to your site using pace. Js
  • The Application of design Pattern of “Summary of Front End Actual Combat” — Memorandum Pattern
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot
  • “Front-end combat summary” of the variable promotion, function declaration promotion and variable scope detailed explanation
  • “Front-end combat summary” how to change the URL without refreshing the page
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)
  • Cartesian product is implemented and applied in javascript