This package has been deprecated

Author message:

This package was intended to be used with @saekitominaga/customelements-details-animation, but since that version has been upgraded to work on its own, this package is no longer needed. This package is no longer needed and will not be maintained.

@saekitominaga/customelements-details-animation-content

Animated motion <details> by Custom Elements

Content excluding <summary> element in the <details> element that animates opening or closing process.

* This feature alone does not animation. Animation can be realized by combining with @saekitominaga/customelements-details-animation.

Demo

• Demo page

* Please see the @saekitominaga/customelements-details-animation Demo page for a demo of the actual animation.

Examples

<details>
  <summary>Caption Text</summary>
  <x-details-animation-content>
    <div slot="content">
      <p>Contents text</p>
    </div>
  </x-details-animation-content>
</details>

Style customization (CSS custom properties)

name	deault	Description
--details-content-transition-duration	0.5s	The length of time that a transition animation takes (transition-duration property)
--details-content-transition-timing-function	ease	The intermediate values used during a transition animation. (transition-timing-function property)
--details-content-transition-delay	0s	When the transition animation will start. (transition-delay property)