This package has been deprecated

Author message:

This package has been moved to @w0s/details-animation

@saekitominaga/customelements-details-animation
TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

Animating the <details> element

npm version test status

Demo

Examples

<details is="x-details-animation"
  open=""
  data-duration="1000"
  data-easing="linear"
>
  <summary>Caption Text</summary>
  <p>Contents text</p>
</details>

Attributes

open [optional]
Whether the details are visible. (open attribute of <details> Element)
data-duration [optional]
The iteration duration which is a real number greater than or equal to zero (including positive infinity) representing the time taken to complete a single iteration of the animation effect (See OptionalEffectTiming for details). If omitted, the default value is 500(ms).
data-easing [optional]
The timing function used to scale the time to produce easing effects (See OptionalEffectTiming for details). If omitted, the default value is ease.

* The data-summary-toggle attribute is obsolete in version 3.0.0 .

Sample CSS

In order to achieve animation, the timing of setting the open attribute of the <details> element is delayed. Therefore, the viewlet icon of the <summary> element should be determined by the data-pre-open attribute.

details[data-pre-open] > summary {
  list-style: none;
}

details[data-pre-open] > summary::-webkit-details-marker {
  display: none;
} /* Safari(16) doesn't support `list-style`, so you need to use the `::-webkit-details-marker` pseudo-element <https://caniuse.com/mdn-html_elements_summary_display_list_item> */

details[data-pre-open] > summary::before {
  margin-inline-end: 0.5em;
  display: inline-block;
  content: '▼';
}

details[data-pre-open='false'] > summary::before {
  transform: rotate(-90deg);
}

* Don't forget to add details[data-pre-open] to all selectors. This will avoid styling in environments where JavaScript is disabled or where Customized built-in elements are not supported (e.g. Safari 16).

Package Sidebar

Install

npm i @saekitominaga/customelements-details-animation

Weekly Downloads

2

Version

3.0.2

License

MIT

Unpacked Size

51.5 kB

Total Files

11

Last publish

Collaborators

  • saekitominaga