Svelte component to make using CSS class based transitions easier - ideally suited for use with TailwindCSS
Loosely modeled on the HeadlessUI Transition.
About 3Kb / 1.5Kb gzipped
Install using your package manager of choice:
pnpm i svelte-transitionImport into your component and use a flag to control whether to show or hide an HTML Element.
import Transition from 'svelte-transition'
let show = falseWrap the HTML Element with the <Transition> component, setting the flag to toggle visibility and the classes to apply when transitioning:
<Transition
{show}
enter="ease-in-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
></Transition>If the leave transition is the opposite of the enter transition it can be omitted to save bytes. This is identical to the previous example:
<Transition {show} enter="ease-in-out duration-300" enterFrom="opacity-0" enterTo="opacity-100"></Transition>i.e. leave will equal enter, leaveFrom will equal enterTo, and leaveTo will equal enterFrom unless you override them.
Set appear to have the transition play on initial mount.
Default false.
Set unmount to have the transitioned element removed from the DOM when not shown (instead of just hidden).
Default false.
If the show property is ommitted then the transition is treated as a child and will receive it's state from it's parent. The parent will automatically wait for it's children to finish transitioning before they are unmounted or hidden, so the animations can complete.
The component raises events to indicate when any transition is running:
before-enterruns before the enter transition happensafter-enterruns after the enter transition happensbefore-leaveruns before the leave transition happensafter-leaveruns after the leave transition happens
If you're converting from TailwindUI markup, you can use this handy converter to convert the comments into <Transition> markup and classes.