angular2-animation

I have a test app build with angular 2, I have successfully applied one animation between route change state('default', style({ opacity: 1, transform: 'scale(1) translateY(0)' })), transition('void <=> default', [ style({ opacity: 0, transform: 'scale(.9) translateY(-20px)' }), animate('.2s') ]) But I also want a different animation when a list page change to an item page, like click a hero inside a hero-list, so I did this state('childActivate', style({ opacity: 1, transform: 'scale(1) translateY(0)' })), transition('childActivate => void', [ animate('1.2s', style({ transform: 'scale(0.9)

I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions. e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use :hover and css-transitions. Is there a particular advantage in using angular 2 animations? I read somewhere that some css animation properties don't invoke the GPU as much, hence there's somethings delays and lags. What about angular2 animations? The question is actually more javascript animation vs css animation (because angular2's animations are based

I'm playing with the Animation API, and I'd like to create a reusable animation like say sliding in content for top level router views. I managed to get through the funky meta data syntax (which is actually pretty cool once get past the crazy idea of using metadata) to get the animations mostly working. @Component({ //moduleId: module.id, selector: 'album-display', templateUrl: './albumDisplay.html', animations: [ trigger('slideIn', [ state('*', style({ transform: 'translateX(100%)', })), state('in', style({ transform: 'translateX(0)', })), state('out', style({ transform: 'translateX(-100%)',