In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-20 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly introduces how to achieve MaterialUI button click animation based on CSS and encapsulated into React components, the article is very detailed, has a certain reference value, interested friends must read it!
Text
First, let's take a look at the button click effect of materialUI:
In essence, it also uses the characteristics of css3 animation. The author looks at the source code and finds that materialUI will animate different locations according to the location of clicks. This is interesting. Let's not talk about such a complex example, let's achieve a similar effect through css3's scheme. The results of the author are as follows:
The above picture is already a button Button component encapsulated by the author based on react, so let's implement it step by step.
1. Principle
The principle of this dynamic effect is actually very simple, that is, the use of css3 transition transition animation, with:: after pseudo-object can be achieved, click because the element will activate: active pseudo-class, and then we based on this pseudo-class, do the background animation on:: after pseudo-object. 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; / / disable 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 (.75for.23recover.82), opacity .6s;} &: active::after {transform: scale (0,0); opacity: .5;}}
The above code is to set transform scale and transparency, and set a gradual radial background image to achieve water ripple animation. In order to achieve more elegant animation, the above css animation can be realized with the help of cubic-bezier, which can generate various forms of Bezier curves. The tool looks like this:
two。 Component design idea
Just using the above code can achieve the animation effect of a button click, but it is not universal, nor does it conform to the style of an experienced programmer, so we have to package it into a general button component step by step. Let it use everything.
I refer to the pattern of ant-design here. Based on the principle of opening and closing, we know that an extensible button component generally has the following characteristics:
Allow users to modify button styles
Externally exposed button event method
Provide button theme and shape configuration
Pluggable and combinable based on the above points, let's design this react component.
3. Concrete implementation of button component based on react and css3
First of all, our components are implemented in react, the technical point 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 Click event exposed * @ param {className} string Custom Class name * @ param {type} string Button Type primary | warning | info | pure * @ param {shape} string Button shape circle | radius (default) * @ param {block} boolean button displays true | false (default) * / export default function Button (props) {let {children OnClick, className, type, shape, block} = props return {children}}
This is the js part of button, but also the core of the component design, button components expose onCpck, className, type, shape, block these props, 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 antd's primary style, shape is used to control whether the button is a round button or a rounded button, and 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; / / disable users from selecting cursor: pointer; text-align: center; & .primary {background-color: # 09f;} & .check {background-color: # F90 } & .info {background-color: # C03;} & .shape {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 & .shape {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 initial state transition: 0s;}}
We realize the switch of button style entirely with the high flexibility brought by css module, which makes the attribute and class name highly related. Let's see how we use it.
/ / index.js import {Button} from'@ / components' import styles from'. / index.css' export default function () {return (default warning primary info pure circle primary&block {alert ('block')}} > circle&block)}
The button style we saw before is generated through the above code, isn't it very simple? Let's take a look at the dynamic effect of the click again:
In fact, not only react, we can use the same principle to implement a vue version of the button component or an angular version of the component, become just syntax. Such component design ideas and elements are officially used in many ui libraries, such as single responsibility principle, component opening and closing principle, de-centralization, composability and so on. I hope it will be helpful for you to design components in the future.
The above is all the content of the article "how to realize the click animation of MaterialUI button based on CSS and encapsulate it into React component". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.