Menu
I'm trying to make a simple animation like the simple jQuery below
animate({'left' : left_indent}) I'm using the Angular2 Animations but the problem is how do I pass the left_indent parameter outside my Component Class in 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 }), ])) ]), ]) ] 
879
The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.
To disable ng-animate for certain elements, using a CSS class, which follows Angular animate paradigm, you can configure ng-animate to test the class using regex. Simply add the ng-animate-disabled class to any elements you want to be ignored by ng-animate.
Now it's 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 (according to SplitterAlex answer):
in template (for Angular < 4.4.6):
<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div> for Angular >= 4.4.6 template should be
<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
