Dojo NG is being built in the open, one section at a time — follow along on Heptapod.

API REFERENCE · ANIMATION

<dj-transition-group>

Staggers the show of its dj-transition children.

The effects live on the children. The group only sets each child's show, with a delay.

Try it in the playground

@dojo-ng/transition-group · v0.1.1

npm install @dojo-ng/transition-group

import "@dojo-ng/transition-group";

How it works

  • When the group's show changes, it sets each child's show in DOM order. Child i starts after i * stagger milliseconds, for both enter and leave.
  • When every child has finished, the group emits one dj-after-enter or dj-after-leave.
  • Slotted elements that are not dj-transition are ignored.

Not built

  • List-move (FLIP) animation.
  • Forwarding appear to the children. Set appear on each child instead.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Properties

PropertyAttributeTypeDefault
showTarget visibility, propagated to the children with a stagger. show reflected boolean false
staggerMilliseconds between successive children. 0 = all in the same tick. stagger number 0

Slots

Default slot