svelte-transition

• Purpose: The svelte-transition library simplifies the use of CSS class-based transitions in Svelte, particularly optimized for integration with TailwindCSS. It is modeled after the HeadlessUI Transition but tailored for Svelte.

• Key Features:

  • Provides a <Transition> component to wrap HTML elements, enabling smooth transitions with configurable classes for entering and leaving states.
  • Supports shorthand syntax where leave transitions mirror enter transitions if not explicitly defined.
  • Includes an appear prop to trigger transitions on initial mount.
  • Offers an unmount prop to remove elements from the DOM (instead of hiding them) when not shown.
  • Supports coordinated transitions between parent and child components, ensuring animations complete before unmounting or hiding.
  • Emits events (before-enter, after-enter, before-leave, after-leave) to track transition states.

• Target Audience: Svelte developers looking for an easy way to implement CSS-based transitions, especially those using TailwindCSS for styling.

• Additional Tool: Includes a converter tool to help migrate TailwindUI markup to <Transition> component syntax.

• Size: Lightweight at 3Kb (1.5Kb gzipped).