https://github.com/itemconsulting/details-animated

Custom component that animates <details><summary>
https://github.com/itemconsulting/details-animated

Last synced: 2 months ago
JSON representation

Custom component that animates <details><summary>

• Host: GitHub
• URL: https://github.com/itemconsulting/details-animated
• Owner: ItemConsulting
• License: mit
• Created: 2024-06-12T14:18:23.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-08-13T08:40:22.000Z (6 months ago)
• Last Synced: 2024-10-13T16:52:54.924Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 116 KB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Custom component for animating details/summary elements

[![npm version](https://badge.fury.io/js/@itemconsulting%2Fdetails-animated.svg)](https://badge.fury.io/js/@itemconsulting%2Fdetails-animated)

## Usage

Register the custom element with JavaScript.

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

  

    Open this nice animated disclosure

    

    This part here will animate in nicely!

  

```

## Statechart

The component is driven by a statemachine following this diagram:

```mermaid

stateDiagram-v2

    [*] --> closed

    closed --> opening: click

    opening --> open: done

    opening --> closing: click

    closing --> closed: done

    closing --> opening: click

    open --> closing: click

```