Custom component for animating details/summary elements

Usage

Register the custom element with JavaScript.

import DetailsAnimated from "@itemconsulting/details-animated";

if (!window.customElements.get("details-animated")) {
  window.customElements.define("details-animated", DetailsAnimated);
}

Use the custom element to wrap a <details>/<summary.

<details-animated>
  <details>
    <summary>Open this nice animated disclosure</summary>
    
    This part here will animate in nicely!
  </details>
</details-animated>

Statechart

The component is driven by a statemachine following this diagram:

stateDiagram-v2
    [*] --> closed
    closed --> opening: click
    opening --> open: done
    opening --> closing: click
    closing --> closed: done
    closing --> opening: click
    open --> closing: click

Loading