CODEWITHSUNDEEP
javascriptangularanimation
Bean0341
Bean0341

Reputation: 1697

Angular 2 multi step animation

I am curious as to whether or not it is possible to do multi step animation with angular 2. I have created a basic animation, where my button slides to the right upon clicking it. However I want to know if I am able to make the buttom move right, then down, or however many more movements I please. I have attempted the following with little success...

state('active', style({
  backgroundColor:'blue',
  transform: ' translatey(100%) translatex(100%) '
})),

This basically makes the box move diagonally, because both translates are triggered at the same time. I want it to translate one step at a time. Any direction or help would be great. Thank you!

edit

As requested plunker

Upvotes: 1

Views: 2110

Answers (2)

Gerard Sans
Gerard Sans

Reputation: 2279

The way to do that in Angular would be using keyframes.

export const move = trigger('move' , [
  state('start', style({ transform: 'translate(0px,0px)' })),
  state('end', style({ transform: 'translate(0px,20px)' })),
  transition('start => end', animate('2s ease-in-out', keyframes([
      style({transform: 'translate(0px,0px)', offset: 0 }),
      style({transform: 'translate(0px,20px)', offset: 0.4 }),
      style({transform: 'translate(20px,20px)', offset: 0.8 }),
      style({transform: 'translate(0px,20px)', offset: 1 })
    ])
  )),
  transition('end => start', animate('2s ease-in-out', keyframes([
      style({transform: 'translate(0px,20px)', offset: 0 }),
      style({transform: 'translate(20px,20px)', offset: 0.4 }),
      style({transform: 'translate(0px,20px)', offset: 0.8 }),
      style({transform: 'translate(0px,0px)', offset: 1 })
    ])
  ))
]);

Plunker

Upvotes: 1

kind user
kind user

Reputation: 41903

Here's the plunker with the solution:

https://plnkr.co/edit/ulE79CSzuxE6DgMshT3W?p=preview

Upvotes: 1

Related Questions