Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix animating-content-size docs (Added mention of issues and solutions when using “display: flex”) #822

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix animating-content-size docs (Added mention of issues and solutions when using “display: flex”) #822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions data/primitives/docs/components/accordion/1.2.0.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -558,6 +558,43 @@ export default () => (
}
```

#### Applying Animations in Non-Tailwind CSS Projects

When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use **max-height** for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using **max-height**:

```css
/* styles.css */
.AccordionContent {
overflow: hidden;
}
.AccordionContent[data-state='open'] {
animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state='closed'] {
animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
from {
__max-height__: 0;
}
to {
__max-height__: var(__--radix-accordion-content-height__);
}
}

@keyframes slideUp {
from {
__max-height__: var(__--radix-accordion-content-height__);
}
to {
__max-height__: 0;
}
}
```

Using **max-height** ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.

## Accessibility

Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion).
Expand Down
37 changes: 37 additions & 0 deletions data/primitives/docs/components/collapsible/1.1.0.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,43 @@ export default () => (
}
```

#### Applying Animations in Non-Tailwind CSS Projects

When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use **max-height** for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using **max-height**:

```css
/* styles.css */
.AccordionContent {
overflow: hidden;
}
.AccordionContent[data-state='open'] {
animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state='closed'] {
animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
from {
__max-height__: 0;
}
to {
__max-height__: var(__--radix-accordion-content-height__);
}
}

@keyframes slideUp {
from {
__max-height__: var(__--radix-accordion-content-height__);
}
to {
__max-height__: 0;
}
}
```

Using **max-height** ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.

## Accessibility

Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure).
Expand Down