Transitions

Bootstrap includes a few general use CSS transitions that can be applied to a number of components. React Bootstrap, bundles them up into a few composable <Transition> components from react-transition-group, a commonly used animation wrapper for React.

Encapsulating animations into components has the added benefit of making them more broadly useful, as well as portable for using in other libraries. All React-bootstrap components that can be animated, support pluggable <Transition> components.

Collapse

Add a collapse toggle animation to an 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.

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        click
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          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.
        </div>
      </Collapse>
    </>
  );
}

render(<Example />);

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        click
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          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.
        </div>
      </Collapse>
    </>
  );
}
render(<Example />);

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.

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-fade-text"
        aria-expanded={open}
      >
        Toggle text
      </Button>
      <Fade in={open}>
        <div id="example-fade-text">
          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.
        </div>
      </Fade>
    </>
  );
}

render(<Example />);

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-fade-text"
        aria-expanded={open}
      >
        Toggle text
      </Button>
      <Fade in={open}>
        <div id="example-fade-text">
          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.
        </div>
      </Fade>
    </>
  );
}
render(<Example />);

API

Collapseview source file

import Collapse from 'react-bootstrap/Collapse'

Name	Type	Default	Description
appear	boolean	`false`	Run the expand animation when the component mounts, if it is initially shown
children required	React.ReactElement
className	string
dimension	`'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	`element.offsetWidth \| element.offsetHeight`	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.
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)
onEnter	function		Callback fired before the component expands
onEntered	function		Callback fired after the component has expanded
onEntering	function		Callback fired after the component starts to expand
onExit	function		Callback fired before the component collapses
onExited	function		Callback fired after the component has collapsed
onExiting	function		Callback fired after the component starts to collapse
role	string		ARIA role of collapsible element
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
unmountOnExit	boolean	`false`	Unmount the component (remove it from the DOM) when it is collapsed

Fadeview source file

import Fade from 'react-bootstrap/Fade'

Name	Type	Default	Description
appear	boolean	`false`	Run the fade in animation when the component mounts, if it is initially shown
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)
onEnter	function		Callback fired before the component fades in
onEntered	function		Callback fired after the has component faded in
onEntering	function		Callback fired after the component starts to fade in
onExit	function		Callback fired before the component fades out
onExited	function		Callback fired after the component has faded out
onExiting	function		Callback fired after the component starts to fade out
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
unmountOnExit	boolean	`false`	Unmount the component (remove it from the DOM) when it is faded out

Transitions

Collapse#

Fade#

API#

Collapse#view source file

Fade#view source file

Collapse

Fade

API

Collapseview source file

Fadeview source file