Utilities

#Transitions Collapse, Fade

Transition components animate their children transitioning in and out.

#Collapse

Add a collapse toggle animation to an element or component.

Smoothing animations

If you're noticing choppy animations, and the component that's being collapsed has non-zero margin or padding, try wrapping the contents of your <Collapse> inside a node with no margin or padding, like the <div> in the example below. This will allow the height to be computed properly, so the animation can proceed smoothly.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false
    };
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.setState({ open: !this.state.open })}>
          click
        </Button>
        <Collapse in={this.state.open}>
          <div>
            <Well>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Well>
          </div>
        </Collapse>
      </div>
    );
  }
}

render(<Example />);

#Props

NameTypeDefaultDescription
in
boolean
false

Show the component; triggers the expand or collapse animation

mountOnEnter
boolean
false

Wait until the first "enter" transition to mount the component (add it to the DOM)

unmountOnExit
boolean
false

Unmount the component (remove it from the DOM) when it is collapsed

appear
boolean
false

Run the expand animation when the component mounts, if it is initially shown

timeout
number
300

Duration of the collapse animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled

onEnter
function

Callback fired before the component expands

onEntering
function

Callback fired after the component starts to expand

onEntered
function

Callback fired after the component has expanded

onExit
function

Callback fired before the component collapses

onExiting
function

Callback fired after the component starts to collapse

onExited
function

Callback fired after the component has collapsed

dimension
one of: 'height', 'width' | function
'height'

The dimension used when collapsing, or a function that returns the dimension

Note: Bootstrap only partially supports 'width'! You will need to supply your own CSS animation for the .width CSS class.

getDimensionValue
function
function getDimensionValue(dimension, elem) { let value = elem[`offset${capitalize(dimension)}`]; let margins = MARGINS[dimension]; return ( value + parseInt(css(elem, margins[0]), 10) + parseInt(css(elem, margins[1]), 10) ); }

Function that returns the height or width of the animating DOM node

Allows for providing some custom logic for how much the Collapse component should animate in its specified dimension. Called with the current dimension prop value and the DOM node.

role
string

ARIA role of collapsible element

#Fade

Add a fade animation to a child element or component.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false
    };
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.setState({ open: !this.state.open })}>
          click
        </Button>
        <Fade in={this.state.open}>
          <div>
            <Well>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Well>
          </div>
        </Fade>
      </div>
    );
  }
}

render(<Example />);

#Props

NameTypeDefaultDescription
in
boolean
false

Show the component; triggers the fade in or fade out animation

mountOnEnter
boolean
false

Wait until the first "enter" transition to mount the component (add it to the DOM)

unmountOnExit
boolean
false

Unmount the component (remove it from the DOM) when it is faded out

appear
boolean
false

Run the fade in animation when the component mounts, if it is initially shown

timeout
number
300

Duration of the fade animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled

onEnter
function

Callback fired before the component fades in

onEntering
function

Callback fired after the component starts to fade in

onEntered
function

Callback fired after the has component faded in

onExit
function

Callback fired before the component fades out

onExiting
function

Callback fired after the component starts to fade out

onExited
function

Callback fired after the component has faded out