0

I have created an Angular animation for my application,Here is the code :

export const slideToRight = trigger('routerAnimate', [
  state('void', style({position: 'fixed', 'width': '100%', 'height': '70%'})),
  state('*', style({position: 'fixed', 'width': '100%', 'height': '70%'})),
  transition('void => *', [
    style({transform: 'translateX(-100%)'}),
    animate('5s ease-in', style({transform: 'translateX(0)'}))
  ]),

  transition('* => void', [
    style({transform: 'translateX(0)'}),
    animate('5s ease-out', style({transform: 'translateX(100%)'}))
  ])
]);`

And i use HostBinding in my Component.ts like this

@HostBinding('@routerAnimate') state;

The code is too long, so it is not posted. please look my gitHubmy application why my animation's transition not working thanks a lot

yiwei zhang
  • 11
  • 1
  • Please check https://github.com/zhangManGod/task/blob/master/task/src/app/app.module.ts Line 28-29 u use both BrowserAnimationsModule and NoopAnimationsModule remove import NoopAnimationsModule refer : https://stackoverflow.com/questions/43362898/whats-the-difference-between-browseranimationsmodule-and-noopanimationsmodule – Visarut Sae-Pueng Feb 18 '19 at 10:57
  • i remove import NoopAnimationsModule and it works.thanks. – yiwei zhang Feb 20 '19 at 05:23

1 Answers1

0

Refer your source.. online 28-29: https://github.com/zhangManGod/task/blob/master/task/src/app/app.module.ts

In AppModule you import multiple animation module (BrowserAnimationsModule and NoopAnimationModule)

Try to remove NoopAnimationModule (use BrowserAnimationsModule only)

What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

Visarut Sae-Pueng
  • 333
  • 4
  • 15