collapse组件样式 react_react-collapse - 利用react-motion实现组件元素高度变化扩展动画...

react-collapse

Component-wrapper for collapse animation for elements with variable (and dynamic) height

Demo

Codepen demo

Installation

NPM

npm install --save react-collapse

yarn

yarn add react-collapse

1998 Script Tag:

(Module exposed as `ReactCollapse`)

Usage

Default behaviour, never unmounts content

import {Collapse} from 'react-collapse';

// ...

Random content

If you want to unmount collapsed content, use Unmount component provided as:

import {UnmountClosed} from 'react-collapse';

// ...

Random content

Options

isOpened: PropTypes.boolean.isRequired

Expands or collapses content.

children: PropTypes.node.isRequired

One or multiple children with static, variable or dynamic height.

Paragraph of text

Another paragraph is also OK

Images and any other content are ok too

theme: PropTypes.objectOf(PropTypes.string)

It is possible to set className for extra div elements that ReactCollapse creates.

Example:

Customly animated container

Default values:

const theme = {

collapse: 'ReactCollapse--collapse',

content: 'ReactCollapse--content'

}

Which ends up