Skip to content

Commit ec77bcb

Browse files
removed animated prop from docs
1 parent 0aa7c4f commit ec77bcb

File tree

4 files changed

+3
-8
lines changed

4 files changed

+3
-8
lines changed

apps/website/src/routes/docs/headless/accordion/examples/animation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default component$(() => {
66
const items = [1, 2, 3];
77

88
return (
9-
<Accordion.Root animated>
9+
<Accordion.Root>
1010
{items.map((item) => (
1111
<Accordion.Item class="collapsible" key={item}>
1212
<Accordion.Header>

apps/website/src/routes/docs/headless/accordion/index.mdx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,14 +135,12 @@ The component itself can also be disabled by setting the `disabled` prop to true
135135

136136
### Height Animation
137137

138-
To animate the height of the content, set the `animated` prop to `true`.
138+
To animate the Accordion content, the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
139139

140140
<Showcase name="animation" />
141141

142142
> In the near future, you won't need JavaScript at all to animate the height of content! Here's the [CSS WG Proposal](https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md) for more info.
143143
144-
You can use the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
145-
146144
<CodeSnippet name="animation.css" />
147145

148146
### Why does padding or border break the animation?

apps/website/src/routes/docs/headless/collapsible/index.mdx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,14 +118,12 @@ To animate the height of the content, we can use a keyframe animation on the hei
118118

119119
### Height Animation
120120

121-
To animate the height of the content, set the `animated` prop to `true`.
121+
To animate the Accordion content, the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
122122

123123
<Showcase name="animation" />
124124

125125
> In the near future, you won't need JavaScript at all to animate the height of content! Here's the [CSS WG Proposal](https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md) for more info.
126126
127-
You can use the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
128-
129127
<CodeSnippet name="animation.css" />
130128

131129
### Why does padding or border break the animation?

packages/kit-headless/src/components/accordion/accordion-item.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ export const HAccordionItem = component$(
105105
disabled={context.disabled || props.disabled}
106106
collapsible={context.collapsible}
107107
accordionItem
108-
animated={context.isAnimatedSig.value}
109108
{...props}
110109
>
111110
<Slot />

0 commit comments

Comments
 (0)