Skip to main content

Animation

Accordion supports expanding and collapsing animation with full state transition cycle, thanks to the react-transition-state library. Because how an accordion should be animated is part of styling, no default animation is included in the package. Generally, you can follow the steps below to enable animation:

  1. set transition and transitionTimeout props on the Accordion component.
<Accordion transition transitionTimeout={250}>
  {/* Accordion items ... */}
</Accordion>

If you use ControlledAccordion component, set the transition props with the useAccordionProvider hook.

const providerValue = useAccordionProvider({
  transition: true,
  transitionTimeout: 250
});

<ControlledAccordion providerValue={providerValue}>
  {/* Accordion items ... */}
</ControlledAccordion>;
  1. add the height transition css to the item content DOM element of each accordion item, which is the element with class selector szh-accordion__item-content.
transition: height 0.25s cubic-bezier(0, 0, 0, 1);
info

The transition duration in CSS should be equal to the value of transitionTimeout prop in the first step.

The transition of height is to create the accordion effect when items are expanded and collapsed. Of course, you are free to animate other CSS properties to suit the needs of your app or design system. For example, you may animate opacity to create fading in/out effects.

Depending on the styling solution in your project, the methods of applying CSS transition are slightly different. You can find some CodeSandbox examples in the styling page which all have animation enabled.

IMPORTANT

To ensure a smooth height animation on accordion items, do not add outer vertical margin to the children of an accordion item to create space around the item. Instead, use padding on the parent DOM element which contains the children. This is the element with class selector szh-accordion__item-panel.

<!-- ❌ don't add vertical margin to the children -->
<div role="region" class="szh-accordion__item-panel">
  <div style="margin: 1rem 0">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
  </div>
</div>
<!-- ✅ Remove the margin on children and use padding on the parent -->
<div role="region" class="szh-accordion__item-panel" style="padding: 1rem 0">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
  </div>
</div>

In case outer vertical margin of the children of an accordion item cannot be practically removed, add a vertical padding on the parent DOM element. It can be a small non-visible padding if you don't actual need one:

<div role="region" class="szh-accordion__item-panel" style="padding: 0.1px 0">
  <div style="margin: 1rem 0">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
  </div>
</div>