在react中轻松让你的数据产生动画
在react中轻松让你的数据产生动画
React UI动画
共529Star
详细介绍
data-driven-motion
Easily animate your data in react
This is a small wrapper around react-motion with the intention of simplifying the api for my most common use case.
Demos and Docs
npm install -S data-driven-motion
Motion
<Motion
data={[]}
component={<ul style={{ padding: 8 }} />}
render={(key, data, style) => <li key={key} style={style}>{data.name}</li>}
getKey={data => data.name}
onComponentMount={data => ({ top: data.top, left: data.left })}
onRender={(data, i, spring) => ({ top: spring(data.top), left: spring(data.left) })}
onRemount={({ data }) => ({ top: data.top - 32, left: data.left - 32 })}
onUnmount={({ data }, spring) => ({ top: spring(data.top + 32), left: spring(data.left + 32) })}
/>
-
619 Star
-
6191 Star
-
236 Star
-
85 Star
-
635 Star
-
228 Star
-
177 Star