AngularLynx

    Enter and Leave Transitions

    Animate elements as they appear and disappear: a single panel with LynxTransition, and a list with LynxTransitionGroup.

    transitionssrc/app/app.ts

    What it shows

    • <lynx-transition> — [show] mounts and unmounts its child. With name="fade", it adds fade-enter on mount and fade-leave before removal. See Enter and leave transitions.
    • A @keyframes animation per phase — .fade-enter and .fade-leave each run a 300 ms animation. [duration] must match it, because the element is removed on a timer.
    • <lynx-transition-group> — animates items as they're added to or removed from [each]. Each item is rendered from an <ng-template let-item>.
    • [trackBy] — tells the group which items are new and which were removed.
    • (afterEnter) and (afterLeave) — fire when each animation ends. The example counts them on screen. See Animation API.