Bean0341 Bean0341 - 1 year ago 99
Javascript Question

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

Answer Source

Here's the plunker with the solution:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download