78 lines
1.6 KiB
Markdown
78 lines
1.6 KiB
Markdown
```markdown
|
|
# ddmt-tool
|
|
|
|
A utility library that provides commonly used functions to simplify everyday development tasks. Whether it's string manipulation, array operations, or other frequent functionalities, `ddmt-tool` helps you work more efficiently.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install ddmt-tool
|
|
```
|
|
|
|
## Usage Example
|
|
General usage.
|
|
```javascript
|
|
import { Name } from 'ddmt-tool';
|
|
|
|
Name();
|
|
```
|
|
Refers specifically to the usage of animateStart.
|
|
|
|
```javascript
|
|
import { animateStart } from 'ddmt-tool';
|
|
|
|
/**
|
|
* animateStart
|
|
* @param {HTMLElement} HTMLElement Animation needs to be played in HTMLElement
|
|
* @param {string} classname The corresponding CSS for the animation
|
|
* @param {boolean} forceExecute Whether to force execute the animation or not
|
|
* @returns {void}
|
|
*/
|
|
animateStart(event, className, forceExecute=false);
|
|
```
|
|
Here's an example of how to use CSS
|
|
```css
|
|
.box-item {
|
|
position: absolute;
|
|
background-color: rgb(255, 223, 181);
|
|
border-radius: 10px;
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
margin: 2px;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
.box-item.animate {
|
|
animation-name: boxbing;
|
|
animation-duration: 0.7s;
|
|
animation-iteration-count: 1;
|
|
/* 设置动画只播放一次 */
|
|
animation-fill-mode: forwards;
|
|
/* 保持动画结束时的状态 */
|
|
}
|
|
|
|
@keyframes boxbing {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
- String manipulation
|
|
- Array operations
|
|
- Custom utilities
|
|
|
|
For more features and usage instructions, please refer to the documentation.
|
|
``` |