为 React 开发的一个超级简单的动画引擎库
为 React 开发的一个超级简单的动画引擎库
JavaScript 动画效果
共1218Star
详细介绍
react-anime
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.
Just place an<Anime>
component and what you want animated inside.
Installation
npm i react-anime -S
Features
-
Animate nearly all CSS, SVG, & DOM attributes by adding a prop with their name (eg.
opacity
,backgroundColor
,translateX
). -
Nested animations are as easy as putting an
<Anime>
component inside another. -
Animations can react to changes in
state
. -
Cascading animations through
delay
prop. -
TypeScript/Flow definitions included.
Usage
import React from 'react';
import Anime, {anime} from 'react-anime';
const App = (props) => (
<Anime delay={anime.stagger(100)}
scale={[.1, .9]}>
<div className="blue"/>
<div className="green"/>
<div className="red"/>
</Anime>
);
-
231 Star
-
4960 Star
-
150 Star
-
2023 Star
-
256 Star
-
433 Star
-
270 Star
-
5 Star