Add: useTransition hook

skeletonlabs / floating-ui-svelte

A Floating UI wrapper for Svelte

https://floating-ui-svelte.vercel.app

MIT License

148 stars 5 forks source link

Add: useTransition hook #11

Open endigo9740 opened 4 months ago

endigo9740 commented 4 months ago

Reference

https://floating-ui.com/docs/useTransition

Description

Provides the ability to apply CSS transitions to a floating element, including correct handling of “placement-aware” transitions.

Style Props

[ ] duration
[ ] initial
[ ] close
[ ] open
[ ] common
[ ] Scale transforms

Status

[ ] Asymmetric transitions
[ ] Placement-aware transitions

Status Props

[ ] duration

Hugos68 commented 4 months ago

I'm curious what the reason is to create this hook instead of leveraging Svelte's built in transition directive? Is it because of placement-aware transitions?

endigo9740 commented 4 months ago

@Hugos68 I think there's two main benefits:

It enables custom CSS class-based animations. Svelte transitions are cool, but they are a bit more complicated to setup and use.
As you mention, they would not have access to placement-aware transitions. So if the popover flips position, this won't affect the Svelte transition which will likely animate the same (ex: slide down where it's supposed to slide up, etc)