angular 4 animations - transition duration is not

Question

what am I doing wrong? The transition happens but it's instant. The time set in animate function is not being applied

trigger('showMenu', [
  state('active', style({
    marginLeft: '0px'
  })),
  state('inactive', style({
    marginLeft: '-230px'
  })),
  transition('inactive => active', animate('2s')),
  transition('active => inactive', animate('2s'))
])

<div [@showMenu]="showMenuState" id="menu-side-wrapper">
    MENU
    <div id="close-menu">
       CLOSE
    </div>
</div>

Answer 1

I've checked the code you've pasted here and it works fine. Could you add any other relevant code? Maybe the code for 'showMenuState'?

Answer 2

I fixed the exact problem in my project by removing the import of NoopAnimationsModule in my main module. This one seems to mock the animations, but actually doesn't do a thing.