@gluonjs/core / src / TransitionGroupProps

Interface: TransitionGroupProps<Item>

Extends

TransitionOptions

Type Parameters

Item

Item

Properties

children

readonly children: (item, index) => TemplateValue

Parameters

item

Item

index

number

Returns

TemplateValue

duration?

readonly optional duration?: number

Inherited from

TransitionOptions.duration

easing?

readonly optional easing?: string

Inherited from

TransitionOptions.easing

enter?

readonly optional enter?: readonly Keyframe[]

Inherited from

TransitionOptions.enter

items

readonly items: Iterable<Item>

key

readonly key: (item, index) => PropertyKey

Parameters

item

Item

index

number

Returns

PropertyKey

leave?

readonly optional leave?: readonly Keyframe[]

Inherited from

TransitionOptions.leave

reducedMotion?

readonly optional reducedMotion?: boolean | "system"

Inherited from

TransitionOptions.reducedMotion

Example

Configure the iterable, stable key function, item renderer, timing, and reduced-motion policy for a transition group:

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);