Angular 4 Animation

npm install @angular/animations@latest --save

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  // Other arrays removed
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule
  ],
})



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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations:[
    trigger('listAnimationy', [
      transition('void => *', [
          query('li', style({opacity:0, transform: 'translateY(-50px)'})),

          query('li', stagger('150ms', [
            animate('500ms 1.2s ease-out', style({ opacity: 1, transform: 'translateY(0px)' }))
          ]))
      ])
    ]),

    trigger('listAnimationx', [
      transition('void => *', [
        query('li', style({ opacity: 0, transform: 'translateX(-50px)' })),

        query('li', stagger('150ms', [
          animate('500ms 1.2s ease-out', style({ opacity: 1, transform: 'translateX(0px)' }))
        ]))

      ])
    ]),

    trigger('fadeIn',[
      state('void', style({})),
      transition('void => *', [
        style({}),
        animate(2000,style({}))
      ]),
      transition('* => void', [
        style({}),
        animate(2000,keyframes([
            style({}),
            style({}),
            style({}),
            style({}),
        ]))
      ]),
      transition('* => *', [
     
      ])

    ])

  ]
})


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

animations: [

    trigger('listAnimations', [

      transition('void => *', [

        query('.animateMe', style({ opacity: 0, transform: 'translateX(-50px)' })),

        query('.animateMe', stagger('200ms', [

          animate('500ms .2s ease-out', style({ opacity: 1, transform: 'translateX(0px)' }))

        ]))

      ])

    ]),    

    trigger('fadeinDown', [

      transition(':enter', [

        style({ 'transform': 'translateY(-20px)', 'display': 'block' }),

        animate('.5s', style({ 'transform': 'translateY(0px)' })),

      ]),

      transition(':leave', [

        animate('.5s', style({ 'transform': 'translateY(20px)', 'display':'none' }))

      ])

    ]),   

    trigger('changeHeightCollapse', [

      state('collapesin', style({

        'height': '50px',

        'overflow': 'hidden'

      })),

      state('collapseout', style({

        'height': '{{leftsideTreeHeight}}'

      }), { params: { leftsideTreeHeight: '500px' } }),

      transition('*<=>*', animate('300ms'))

    ])

  ]