Adam j Adam j - 2 months ago 185
TypeScript Question

Using Renderer.animate in Angular 2 App

Binding variables to the new Animations DSL isn't available and I have been looking for alternatives.

The only one I have found so far is the Renderer.animate function but I have not been able to get it working or find any examples for it.

Looking at the code I found that it uses the following parameters.

renderer.animate(
element: any,
startingStyles: AnimateStyles,
keyframes: AnimiationKeyframe[],
duration: number,
delay: number,
easing: string
): AnimationPlayer


What I got (not working):

renderer.animate(
element,
{'opacity': this.temp},
[
{'opacity' : .5},
{'opacity' : 1}
],
2,
1,
'linear'
)


What would be the correct way to get this working? Any help would be appreciated.

Thanks

Answer

Looks like I can use the renderer.invokeElementMethod to use custom animations in Angular 2.

animate(){
  let posX = 100;

  this.renderer.invokeElementMethod(
    this.temp.nativeElement, 
    'animate', 
    [
      [
        {transform: 'translate(0)'},
        {transform: 'translate('+posX+'px, 100px)'}
      ], 
      500
    ]
  );
}

Other options to use can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

plnkr example : http://plnkr.co/edit/YuFiBSmTQEa95fKHhoKM?p=preview