AnimakitExpander
React component for the expanding and collapsing of the blocks. Supports both vertical and horizontal mode.
Usage
<div className="title" onClick={ toggle }>
{ this.props.title }
</div>
<AnimakitExpander expanded={ this.state.expanded }>
<div className="text">
{ this.props.text }
</div>
</AnimakitExpander>Demo
Installation
npm install animakit-expander
Properties
| Property | Required | Type | Default Value | Available Values | Description |
|---|---|---|---|---|---|
| expanded | true | bool | false |
true, false |
State of the component: expanded or collapsed |
| horizontal | false | bool | false |
true, false |
If true, component will expand in horizontal direction |
| align | false | string | top, bottom for the default direction or left, right for the horizontal direction |
Align of the content during the animation | |
| duration | false | number | 500 |
Any integer number | Duration of animation |
| durationPerPx | false | number | 0 |
Any integer number | Duration of animation per pixel. Use it if you want the duration depended on the size and calculated dynamically. |
| easing | false | string | ease-out |
Any easing function | Easing function of animation |
Origin
Part of Animakit. See https://animakit.github.io for more details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent