@gluonjs/core / src / TransitionGroup

Function: TransitionGroup()

TransitionGroup<Item>(props): TemplateValue

Animates keyed insertion, removal, and movement while repeat() retains identity.

Type Parameters

Item

Item

Parameters

props

TransitionGroupProps<Item>

Returns

TemplateValue

Example

Animate keyed product insertion, removal, and movement while respecting the user's reduced-motion preference:

import { TransitionGroup, html, type TransitionGroupProps } from '@gluonjs/core';

type Product = { id: string; name: string };
const props = {
  items: [{ id: 'lamp', name: 'Orbit Lamp' }, { id: 'tray', name: 'Stack Tray' }],
  key: (product: Product) => product.id,
  children: (product: Product) => html`<article>${product.name}</article>`,
  duration: 180,
  reducedMotion: 'system',
} satisfies TransitionGroupProps<Product>;
const animatedProducts = TransitionGroup(props);
console.log(animatedProducts);