During the development of a project, designers will inevitably create animated effects to enhance the user experience. If the current effect does not require interaction and is only for display, we can use GIF or APNG to achieve the effect. but if the current animation requires other interactions in addition to presentation, or even a component requires animation effects, it would be unreasonable to use a picture format. So I wrote an extremely simple css animation library rc-css-animate . Here we directly use animate.css as the dependent library for css animation. Animate.css not only provides many interactive animation style classes, but also provides animation running speed, latency, and the number of repetitions and other style classes. as you can see, the default animate.css build animation needs to carry the prefix "animate__". <h1 class="animate__animated animate__bounce">An animated element</h1> of course, the library encapsulates css animation and still supports other animation libraries as well as their own handwritten css animation, but this library is not recommended if developers need to control all kinds of complex animation. use can be used in the following ways: import React, { useRef } from "react"; import ReactCssAnimate from "rc-css-animate"; // introduce animate.css as an animation dependency import "animate.css"; function App() { const animateRef = useRef(null); return ( <div className="App"> <ReactCssAnimate // Define the components that currently display the animation // Use by default div tag="div" // Of the current component className className="" // Of the current component style style={{}} // Of the current component ref ref={animateRef} // Animation prefix clsPrefix="animate__" // Of the current animation className animateCls="animated…

Preface Dropdown drop-down menu import import Dropdown from '@/components/Dropdown/Dropdown' The use of subcomponents is as follows: const MenuItem = Dropdown.MenuItem; const SubMenu = Dropdown.SubMenu; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. onClickMenu Type: func default value: no description: click to trigger the callback function to change the classname of the sub-component. Input parameters: {string} trigger drop-down trigger mode 3. title Type: string default value: no description: drop-down button prompts for title MenuItem child content components import import Dropdown from '@/components/Dropdown/Dropdown'; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. className Type: string (required) default: click | hover description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover' 3. disabled Type: bool default value: false Note: the sub-content of the drop-down is grayed out, true is grayed out, false is normal 4. onClickMenuItem Type: func (required) default value: no description: click on a single sub-content to perform the action. Input parameters: {string | number} value | some item selected by key parent of SubMenu child content import import Dropdown from '@/components/Dropdown/Dropdown'; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. className Type: string (required) default: click | hover description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover' 4. title Type: string default value: no description: drop-down button prompts for title Let's implement dropdown.js import React from 'react';…