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>
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