1.2.0 • Published 3 years ago
@saekitominaga/customelements-details-animation-content v1.2.0
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
* 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) |