sek-consulting / solid-ui

Beautifully designed components. Built with Kobalte & corvu. Styled with Tailwind CSS.
https://www.solid-ui.com
MIT License
832 stars 32 forks source link

Sheet component's closing animation is missing #68

Closed declanchiu closed 6 months ago

declanchiu commented 6 months ago

I realized that the closing animation of the Sheet component is missing. The sheet component in shadcn/ui has a collapsing effect when it is closed.

declanchiu commented 6 months ago

I took a look at the source code for solid-ui's sheet component and I think I've figured out why.

image

Currently there is only the animate-in effect of twindcss-animate. The animate-out effect is missing。

The expand and close effects of the sheet component above shadcn/ui are controlled by the data-* property selector.

image

But soliid-ui's sheet component's primitive component is kobalte/Dialog, and its data-* attribute parameter is not explicitly given a value. So even if you add something like shadcn/ui's data-[epanded=true]: animatie-in, it won't work.

image

declanchiu commented 6 months ago

I think I would be interested in solving this problem and contributing a pr... 😃

Do you have a better suggestion? @sek-consulting

jcramb commented 6 months ago

@declanchiu please do :) I need to fix this for my current project and would appreciate it!

sek-consulting commented 6 months ago

@declanchiu If you want to contribute feel free to do so :)

I just merged the big changes back into the main branch so you can use that as a base without any worries.

declanchiu commented 6 months ago

@declanchiu If you want to contribute feel free to do so :) 如果您想做出贡献,请随时这样做:)

I just merged the big changes back into the main branch so you can use that as a base without any worries.我刚刚将重大更改合并回主分支,因此您可以将其用作基础而无需担心。

Thank you for your efforts @sek-consulting I'll try to fix this. 😄

declanchiu commented 6 months ago

@declanchiu please do :) I need to fix this for my current project and would appreciate it! 请这样做:)我需要为我当前的项目解决这个问题,我将不胜感激!

Ok, I'll try to fix this, thanks for using solid-ui! 😄

sek-consulting commented 6 months ago

https://www.solid-ui.com/docs/components/sheet The animation from the PR is merged and I also updated the component to be more inline with the shadcn version.