Parameter in Angular2 animation
I am trying to do simple animation like simple jQuery below
animate({'left' : left_indent})
I am using Angular2 animation, but the problem is how to pass the left_indent parameter outside of my component class to the animation trigger?
animations: [
trigger('flyInOut', [
state('for', style({
left: this.left_indent,
})),
transition('* => for', [
animate(2000, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
]))
]),
])
]
source to share
It is now possible.
animations: [
trigger('flyInOut', [
state('for', style({
left: '{{left_indent}}', // use interpolation
}), {params: {left_indent: 0}}), // default parameters values required
transition('* => for', [
animate(2000, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
]))
]),
])
]
UPDATE (as per SplitterAlex answer):
in template (for Angular <4.4.6):
<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>
for Angular> = 4.4.6 the template should be
<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>
source to share
The accepted answer doesn't work for me with Angular 4.4.6
You have to wrap the param values in a template in an object params
Replace:
<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>
FROM
<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>
source to share
I have one solution. But this is only useful if you are trying to use the same animation multiple times with different parameters that you already know.
For example, I have a reusable animation to create a slideUp-slideDown effect. And when folded, the container needs to maintain some height (which I already know for these containers).
Animation:
import { style, trigger, state, transition, animate } from "@angular/animations";
export const slideUpDownAnimation = (height) => {
return trigger(`slideUpDownAnimation${height}`, [
state('0', style({
overflow: 'hidden',
height: '*'
})),
state('1', style({
overflow: 'hidden',
height: `${height}px`
})),
transition('1 => 0', animate('400ms ease-in-out')),
transition('0 => 1', animate('400ms ease-in-out'))
]);
};
In a component class:
import { slideUpDownAnimation } from "../../animations/slide-up-down.animation";
@Component({
moduleId: module.id,
selector: 'new-order',
templateUrl: './new-order.component.html',
animations: [
slideUpDownAnimation(32), // will return trigger named "slideUpDownAnimation32"
slideUpDownAnimation(60) // will return trigger named "slideUpDownAnimation60"
]
})
export class NewOrderComponent {...
Finally, in the html component:
<div class="header-fields"
[@slideUpDownAnimation32]="collapsedFields">
...
<div class="line-group"
*ngFor="let group of lineGroups; let g = index"
[@slideUpDownAnimation60]="group.collapsed">
...
Unfortunately it cannot be used for dynamic parameters because you have to define them in the decorator and html.
source to share
Currently, animation only allows static value definitions.
However, according to this git hub feature request , raised in June 2016, there is a plan, but it still remains included feature backlog to add.
It hasn't been released yet.
source to share