Why isn't the transition working as expected? Even though the animate function is set with a time of 2 seconds, the transition happens instantly.
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>