Angular 2 Animation API is pretty slick. It actually uses the browser's implementation of W3C Web Animation Specification (or polyfill thereof), but the interface to it from Ng is very clean and easy to use.
You can see some quick examples on their documentation.
But here's how I am using it for animating route changes.
This will allow my side panel to fly in and out on route changes.
What's really important here is the "host" attribute. This will put the animation trigger on the host / containing element ("opscon-menu" in this case) itself. When I put the trigger on any element in the template itself rather on the host, the exit animation ("* => void") never gets executed. This is probably because Angular doesn't have any animation promise when removing the host element, so it just removes it right away. By putting the "@routeAnimation" trigger on the host, Angular waits for the animation to complete before removing the element from the DOM. Note that the name "routeAnimation" has no special significance... just a name.
As a side note, I'm also attaching a class to the host here. I'm not sure if this is the best spot to do this or not...
No comments:
Post a Comment