<details>
by Custom Elements
Animated motion
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) |