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

Playground Docs Components Migrate Blog Community Source GitHub
★ GitHub ★ Heptapod Get started

API REFERENCE · ANIMATION

<dj-transition>

Runs an enter or leave effect when show changes.

The component defines no effects itself. It sets a state attribute on the host, and your page CSS attaches the animation to it.

Try it in the playground

@dojo-ng/transition · v0.1.1

npm install @dojo-ng/transition

import "@dojo-ng/transition";

States

  • state moves through entering, entered, leaving, and left.
  • Attach the enter effect to dj-transition[state="entering"] and the leave effect to dj-transition[state="leaving"].
  • The content stays visible through the leave effect, then is hidden with display: none at state="left".

Effects

  • An enter effect must be a @keyframes animation.
  • A leave effect can be an animation or a CSS transition.
  • If show changes again during an effect, that effect stops cleanly and its event does not fire.

Not built

  • Enter effects made with CSS transitions.

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

Properties

PropertyAttributeTypeDefault
showTarget visibility. Toggling runs the enter or leave effect. show reflected boolean false
appearRun the enter effect on initial mount when show starts true. appear reflected boolean false
stateManaged by the component; consumers treat it as read-only. state reflected "entering""entered""leaving""left" None

Events

dj-after-enterdj-after-leave

Slots

Default slot