Need help with react-animate-height?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Stanko
547 Stars 41 Forks MIT License 99 Commits 3 Opened issues

Description

Lightweight React component for animating height using CSS transitions. Slide up/down the element, and animate it to any specific height.

Services available

!
?

Need anything else?

Contributors list

# 64,899
React
figma-a...
prerend...
Vue.js
71 commits
# 184,906
Clojure
Lua
hammers...
macOS
2 commits
# 400,953
Objecti...
datepic...
React N...
time-pi...
2 commits
# 359,323
openshi...
Kuberne...
React
recompo...
1 commit
# 27,101
Shell
microso...
TypeScr...
CSS
1 commit
# 3,588
JavaScr...
phantom...
save-ed...
nintend...
1 commit
# 621,543
HTML
CSS
React
Shell
1 commit
# 85,074
React
Vanilla...
toggle
iOS
1 commit
# 256,681
TypeScr...
Shell
React
CSS
1 commit
# 662,153
JavaScr...
Shell
1 commit
# 637,627
JavaScr...
Shell
1 commit
# 21,110
typescr...
TypeScr...
coffees...
redux-m...
1 commit
# 580,001
applica...
HTML
Shell
Azure
1 commit

React Animate Height

npm version npm downloads

Lightweight React component for animating height using CSS transitions. Slide up/down the element, and animate it to any specific height. Content's opacity can be optionally animated as well (check

animateOpacity
prop bellow).

CSS classes are applied in specific animation states, check

animationStateClasses
prop.

Changelog

Note about versions

For React >=16.3.0 (17 included) make sure you are using v2.x.

Read more about React lifecycle changes introduced with React 16.3.

Demo

Live demo: muffinman.io/react-animate-height

Because multiple people asked how to animate list items, I created this simple example for that as well.

To build the examples locally, run:

npm install
npm start

Then open

localhost:8080
in your browser of choice browser.

Or play with this sandbox.

Quick start

Get it from npm

$ npm install --save react-animate-height

Import and use it in your React app.

import React, { Component } from 'react';
import AnimateHeight from 'react-animate-height';

export default class Example extends Component { state = { height: 0, };

toggle = () => { const { height } = this.state;

this.setState({
  height: height === 0 ? 'auto' : 0,
});

};

render() { const { height } = this.state;

return (
  <div>
    <button aria-expanded="{" height aria-controls="example-panel" onclick="{" this.toggle>
      { height === 0 ? 'Open' : 'Close' }
    </button>

    <animateheight id="example-panel" duration="{" height="{" see props documentation below>
      <h1>Your content goes here</h1>
      <p>Put as many React or HTML components here.</p>
    </animateheight>
  </div>
);

} }

Props

  • height: numeric or percentage value (ie.
    '50%'
    ) or
    'auto'
    , required

When changed, element height will be animated to that height.
To slide up use 0, for slide down use 'auto'

  • duration: integer, default:
    250

Duration of the animation in milliseconds

  • delay: integer, default:
    0

Animation delay in milliseconds

  • easing: string, default:
    'ease'

CSS easing function to be applied to the animation

  • id: string

HTML

id
attribute.
  • className: string

CSS class to be applied to the element

Please note that you shouldn't apply properties that are messing with the layout (like

display
,
height
...), as these might break height calculations

  • style: object

CSS style object, it will be merged with inline styles of the component

Please note that you shouldn't apply properties that are messing with the layout (like

display
,
height
...), as these might break height calculations

  • contentClassName: string

CSS class to be applied to content wrapper element

Please note that you shouldn't apply properties that are messing with the layout (like

display
,
height
...), as these might break height calculations

  • animationStateClasses: object

Object containing CSS class names for animation states, default:

  {
    animating:                  'rah-animating',
    animatingUp:                'rah-animating--up',
    animatingDown:              'rah-animating--down',
    static:                     'rah-static',
    animatingToHeightZero:      'rah-animating--to-height-zero',
    animatingToHeightAuto:      'rah-animating--to-height-auto',
    animatingToHeightSpecific:  'rah-animating--to-height-specific',
    staticHeightZero:           'rah-static--height-zero',
    staticHeightAuto:           'rah-static--height-auto',
    staticHeightSpecific:       'rah-static--height-specific',
  }

Please note that this one will be merged with the default object and cached when component is created, so changing it afterwards will have no effect.

  • onAnimationStart: function

Callback which will be called when animation starts.

This first argument passed to this callback is an object containing

newHeight
, the pixel value of the height at which the animation will end.
  • onAnimationEnd: function

Callback which will be called when animation ends.

This first argument passed to this callback is an object containing

newHeight
, the pixel value of the height at which the animation ended.
  • applyInlineTransitions: boolean, default:
    true

If this flag is set to

false
only CSS classes will be applied to the element and inline transition styles will not be present.
  • animateOpacity: boolean, default:
    false

If set to

true
content will fade-in (and fade-out) while height is animated.
  • aria-hidden: boolean

By default, library will set

aria-hidden
to
true
when height is zero. If you wish to override it, you can pass the prop yourself.

Additional props will be passed to the wrapper div, to make adding attrs like

aria-*
easier.

Accessibility

Library will hide the content using

display: hidden
when height props is 0. It will also apply
aria-hidden="true"
in the same case, but you can override it by passing
aria-hidden
prop yourself.

When using a button to toggle height, make sure you add

aria-expanded
and
aria-controls
to make everything accessible. Here's an example:
  Toggle



  Content

Gotchas

Bounded flexboxes

If

AnimateHeight
is a flex child and it's parent has a fixed height, animation won't work. To fix this, you just need to add the following CSS rule to the
AnimateHeight
instance.
flex-shrink: 0;

You can do it by passing a

className
or directly in the
style
prop

Check the issue #89 for the example and more details.

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.