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¶
from
-string
: forward, backwarddirection
-strin
: from stateto
-string
: =>, <=, <=>type
-string
: to state
getSideSlideAnimation¶
getSideSlideAnimation(translateEnter, translateEnterTo, translateLeave, translateLeaveTo, translateDirection);
Generates an slide animation for angular animate.
Parameters¶
translateEnter
-number
: From translateDirection on entertranslateEnterTo
-number
: To translateDirection on entertranslateLeave
-number
: From translateDirection on leavetranslateLeaveTo
-number
: To translateDirection on leavetranslateDirection
-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¶
from
-string
: forward, backwardto
-string
: =>, <=, <=>direction
-strin
: from state
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¶
from
-string
: forward, backwardto
-string
: =>, <=, <=>direction
-strin
: from state
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¶
from
-string
: forward, backwardto
-string
: =>, <=, <=>direction
-strin
: from state
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¶
from
-string
: forward, backwardto
-string
: =>, <=, <=>direction
-strin
: from state
Returns¶
AnimationEntryMetadata
: Transition including it’s slideanimation