@lichin/pico
Advanced tools
Comparing version 0.1.3 to 0.1.4
{ | ||
"name": "@lichin/pico", | ||
"version": "0.1.3", | ||
"version": "0.1.4", | ||
"description": "Animation helper", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
[![npm(scoped)](https://img.shields.io/npm/v/@lichin/pico.svg)](https://github.com/lichin-lin/pico) | ||
[![npm bundle size](https://img.shields.io/bundlephobia/min/@lichin/pico.svg)](https://github.com/lichin-lin/pico) | ||
Animation helper ⭐️ | ||
--- | ||
githubbox.com | ||
<h3 align="center"> | ||
An experimental animation<br>library for React on the web. | ||
</h3> | ||
<br> | ||
## Get started | ||
### Quick start | ||
``` | ||
npm install @lichin/pico | ||
``` | ||
```jsx | ||
import React from "react"; | ||
import { animate } from "@lichin/pico"; | ||
export default function App() { | ||
const handleRotate = () => { | ||
const elm = document.querySelector(".image"); | ||
animate(elm, { | ||
rotate: 90, | ||
transition: { | ||
duration: 0.4 | ||
} | ||
}); | ||
}; | ||
return ( | ||
<div className="App"> | ||
<img | ||
onClick={handleRotate} | ||
src="https://miro.medium.com/max/1400/1*UktO9Cqfa_M7gv3syxCjRg.jpeg" | ||
alt="doggy" | ||
className="image" | ||
/> | ||
</div> | ||
); | ||
} | ||
``` | ||
### Demo | ||
you can play with it through [codesandbox example](https://codesandbox.io/s/pico-sspzc?file=/src/App.js) | ||
### Docs | ||
**Animate API** | ||
<br /> | ||
Animate function contain two parameter: | ||
<br /> | ||
| Prop | Type | Default | Description | | ||
| ------------- | ------------- | ------------- | ------------- | | ||
| element | HTMLElement Object | - | Single HTMLElement Object | | ||
| options | Object | {} | Please see next object description for the details | | ||
options object contain two type of keys: | ||
| Key | Type | Default | Description | | ||
| ------------- | ------------- | ------------- | ------------- | | ||
| transition | Object | - | Describe how the animation should play, currently support `duration: Number` | | ||
| rotate | Number | - | The value that the element should rotate | | ||
## License | ||
Pico is MIT licensed. |
@@ -15,3 +15,2 @@ import { | ||
const { transition, ...properties } = options; | ||
// handle transition | ||
elm.style.transition = `transform ${(transition && transition.duration) || | ||
@@ -18,0 +17,0 @@ 0}s`; |
@@ -23,4 +23,8 @@ /** | ||
let b = values[1]; | ||
let angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)) || 0; | ||
let radians = Math.atan2(b, a); | ||
if (radians < 0) { | ||
radians += 2 * Math.PI; | ||
} | ||
let angle = Math.round(radians * (180 / Math.PI)) || 0; | ||
return angle; | ||
}; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4720
57
64