router transition

Source router-transition

createRouterTransition

createRouterTransition(animationDefinitions)

Create a transition for several an router-outlet to get swiping animations between routing changes.

Returns

AnimationDefinition`: The animation definitions

Example

Slide two components to the left / right.

  • component.ts
@Component({
  ...
  animations: [
    createRouterTransition([
      new AnimationDefinition('component1', '=>', 'component2', 'right'),
      new AnimationDefinition('component2', '=>', 'component1', 'left'),
    ])
  ]
})
  • component.html
<div evan-content [@routerTransition]="o?.activatedRouteData?.state">
  <router-outlet #o="outlet"></router-outlet>
</div>

AnimationDefinition

new AnimationDefinition(from, direction, to, type)

Defines an AnimationDefinition that specifies the transition that should be build.

Parameters

  1. from - string: forward, backward
  2. direction - strin: from state
  3. to - string: =>, <=, <=>
  4. type - string: to state

Example

new AnimationDefinition('component1', '=>', 'component2', 'right')

getSideSlideAnimation

getSideSlideAnimation(translateEnter, translateEnterTo, translateLeave, translateLeaveTo, translateDirection);

Generates an slide animation for angular animate.

Parameters

  1. translateEnter - number: From translateDirection on enter
  2. translateEnterTo - number: To translateDirection on enter
  3. translateLeave - number: From translateDirection on leave
  4. translateLeaveTo - number: To translateDirection on leave
  5. translateDirection - number: translateX / translateY

Returns

Array<any> : The side slide animation.

Example

up: function (from: string, to: string, direction: string): AnimationEntryMetadata {
  return transition(`${from} ${direction} ${to}`, getSideSlideAnimation(
    100, 0,
    0, -100,
    'translateY'
  ));
},

animations.up

animations.up(from, to, direction);

Generate up animation (from bottom to top)

cannot directly used within component animations, only used for animation building

Parameters

  1. from - string: forward, backward
  2. to - string: =>, <=, <=>
  3. direction - strin: from state

Returns

AnimationEntryMetadata : Transition including it’s slideanimation

animations.down

animations.down(from, to, direction);

Generate down animation (from top to bottom)

cannot directly used within component animations, only used for animation building

Parameters

  1. from - string: forward, backward
  2. to - string: =>, <=, <=>
  3. direction - strin: from state

Returns

AnimationEntryMetadata : Transition including it’s slideanimation

animations.right

animations.right(from, to, direction);

Generate right animation (from left to right)

cannot directly used within component animations, only used for animation building

Parameters

  1. from - string: forward, backward
  2. to - string: =>, <=, <=>
  3. direction - strin: from state

Returns

AnimationEntryMetadata : Transition including it’s slideanimation

animations.left

animations.left(from, to, direction);

Generate left animation (from right to left)

cannot directly used within component animations, only used for animation building

Parameters

  1. from - string: forward, backward
  2. to - string: =>, <=, <=>
  3. direction - strin: from state

Returns

AnimationEntryMetadata : Transition including it’s slideanimation