repository·main·Indexed 43 days ago
https://github.com/solidjs-community/solid-transition-groupComponents for managing entry, exit, and move animations in SolidJS. Version 0.3.0 provides the <Transition> component for single elements and <TransitionGroup> for animating lists using the FLIP technique. Supports CSS-based animations via class prefixes and JavaScript-based animations through lifecycle hooks like onEnter and onExit.
By default, <Transition> applies enter and exit transitions simultaneously. Use the mode prop to change this:
"outin": Waits for the exiting element to finish before starting the entering element."inout": Waits for the entering element to finish before starting the exiting element.The <Transition> component applies animation effects to a single element or component as it enters or leaves the DOM. It does not render an extra DOM element or appear in the component hierarchy.
By default, transitions are not applied on the initial render. To apply them on mount, set the appear prop to true.
Warning: Using appear with SSR may cause a flash of unstyled content as the initial transition is applied on the client-side. You must handle initial transitions on the server-side manually if using SSR.
import { Transition } from "solid-transition-group"
const [isVisible, setVisible] = createSignal(true)
<Transition name="slide-fade">
<Show when={isVisible()}>
<div>Hello</div>
</Show>
</Transition>
setVisible(false) // triggers exit transitionTo use CSS transitions, provide a name prop to <Transition>. This name acts as a prefix for automatically generated CSS classes. For example, name="fade" generates .fade-enter, .fade-enter-active, etc.
| Prop | Description |
|---|---|
name | Prefix for generated classes. Defaults to "s". |
enterClass | Class applied at the start of enter transition. Defaults to "s-enter". |
enterToClass | Class applied after enter transition starts. Defaults to "s-enter-to". |
enterActiveClass | Class applied for the entire duration of enter transition. Defaults to "s-enter-active". |
exitClass | Class applied at the start of exit transition. Defaults to "s-exit". |
exitToClass | Class applied after exit transition starts. Defaults to "s-exit-to". |
exitActiveClass | Class applied for the entire duration of exit transition. Defaults to "s-exit-active". |
/* Example for name="slide-fade" */
.slide-fade-enter-active,
.slide-fade-exit-active {
transition: opacity 0.3s, transform 0.3s;
}
.slide-fade-enter,
.slide-fade-exit-to {
transform: translateX(10px);
opacity: 0;
}
.slide-fade-enter {
transform: translateX(-10px);
}Install the package using your preferred package manager:
npm install solid-transition-group
# or
yarn add solid-transition-group
# or
pnpm add solid-transition-groupBy default, the library uses the prefix s- to generate CSS classes. If you provide a name prop, the classes will be prefixed with that name.
For a name="fade", the following classes are used:
Enter Phase:
fade-enter: Initial state of the entering element.fade-enter-active: State applied during the entire duration of the enter transition.fade-enter-to: Final state of the entering element.Exit Phase:
fade-exit: Initial state of the exiting element.fade-exit-active: State applied during the entire duration of the exit transition.fade-exit-to: Final state of the exiting element.Move Phase (TransitionGroup only):
fade-move: Applied to elements that are repositioning within the group.You can hook into the transition lifecycle using JavaScript events. When using these events, you must call the done callback to signal the end of the transition. If done is not provided, the component will automatically call it on transitionend or animationend.
| Event | Parameters | Description |
|---|---|---|
onBeforeEnter | element: Element | Called before enter starts. Element is not yet rendered. |
onEnter | element: Element, done: () => void | Called when enter starts. Element is in DOM. Call done() to finish. |
onAfterEnter | element: Element | Called after enter ends. |
onBeforeExit | element: Element | Called before exit starts. Element is still rendered. |
onExit | element: Element, done: () => void | Called when exit starts. Call done() to remove element from DOM. |
onAfterExit | element: Element | Called after exit ends. |
<Transition
onEnter={(el, done) => {
const a = el.animate([{ opacity: 0 }, { opacity: 1 }], {
duration: 600
});
a.finished.then(done);
}}
onExit={(el, done) => {
const a = el.animate([{ opacity: 1 }, { opacity: 0 }], {
duration: 600
});
a.finished.then(done);
}}
>
{show() && <div>Hello</div>}
</Transition>The <TransitionGroup> component is used for animating multiple elements (e.g., items in a list). It supports moving transitions via the FLIP technique using CSS transforms.
When a child's position changes, it receives a moving CSS class. If the transform property is transition-able, the element will animate smoothly to its new position.
moveClass: CSS class applied to moving elements for the duration of the move. Defaults to "s-move".<Transition> props except mode.<ul>
<TransitionGroup name="slide">
<For each={state.items}>{item => <li>{item.text}</li>}</For>
</TransitionGroup>
</ul>The <Transition> component allows you to apply enter and leave animations to a single element passed as props.children. It is ideal for toggling visibility of a single component.
name: (string) Prefix for auto-generated CSS classes (e.g., name="fade" generates .fade-enter, .fade-enter-active, etc.). Defaults to "s".appear: (boolean) Whether to apply the transition on the initial render. Defaults to false.mode: ("inout" | "outin") Controls the timing sequence. "outin" waits for the exiting element to finish before starting the entering one. "inout" starts them simultaneously.enterActiveClass, enterClass, enterToClass: Custom CSS classes for the entering phase.exitActiveClass, exitClass, exitToClass: Custom CSS classes for the exiting phase.onBeforeEnter, onEnter, onAfterEnter, onBeforeExit, onExit, onAfterExit: Lifecycle event hooks.<Transition name="fade" appear mode="outin">
{show() && <div class="content">Hello World</div>}
</Transition>The <TransitionGroup> component is used for animating lists of elements. It supports entering, exiting, and moving elements when the list order changes.
name: (string) Prefix for auto-generated CSS classes. Defaults to "s".appear: (boolean) Whether to apply the transition on the initial render.moveClass: (string) CSS class applied to elements during the "move" transition (e.g., when an item's position in a list changes). Defaults to "s-move".onBeforeEnter, onEnter, onAfterEnter, onBeforeExit, onExit, onAfterExit: Lifecycle event hooks.Note: Unlike <Transition>, <TransitionGroup> does not support the mode prop as it manages multiple elements simultaneously.
<TransitionGroup name="list">
<For each={items()}>
{(item) => <div>{item}</div>}
</For>
</TransitionGroup>Both <Transition> and <TransitionGroup> expose a TransitionEvents object via props to hook into the animation lifecycle.
| Event | Timing | Description |
|---|---|---|
onBeforeEnter | Before enter starts | Element is not yet rendered. |
onEnter | Enter starts | Element is in the DOM. Call done() to end the transition. |
onAfterEnter | After enter ends | Element is rendered and transition is complete. |
onBeforeExit | Before exit starts | Element is still rendered; exit classes are not yet applied. |
onExit | Exit starts | Exit classes are applied. Call done() to remove the element from the DOM. |
onAfterExit | After exit ends | Element is removed from the DOM. |
The exitTransition function is an exported utility that runs an exit transition on a specific DOM element. It is typically used internally by TransitionGroup but can be used to manually trigger exit logic.
Signature:
exitTransition(classes: ReturnType<ReturnType<typeof createClassnames>>, events: TransitionEvents, el: Element, done?: VoidFunction)