angular 2/5 page animation with ui router

Question

i try to create a page switch animation but i cant found where to put the animation.

i have read in this tutorial how to make animation and it works good, but its a component based. that means i need to place my animation in each component.

i have put it on the app component as well but that did nothing.

is there a way to do it in one place like in the router ?
i am using ui-router

Answer 1

you can create animations from @angular/animations.

Inside the @Component you can declare them, for example:

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

You must set and update the state of the component, in your case, the greater box or div which wraps the content.

For inserting the animation into a component you must code something like this:

<div [@heroState]="hero.state">
    <!-- Component content -->
</div>

With this and lifecycle you can update the states and play with it; angular animations are a little bit complex because the big configuration, but because of this they're so powerful.

EDIT: After using it:

npm install @angular/animations@latest --save

For using Angular Animations the condition is add it to the current or root module:

@NgModule({
  ...
  imports: [
    // other modules removed for brevity
    BrowserAnimationsModule
  ],
})

And add the animations to the component in fact:

import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';