Following this documentation here i'm trying to put some animations in my apps to but I have some problem to understand the animations trigger.

Html component

<div class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
        <li>
            <span (click)="open()" class="glyphicons glyphicons-show-lines">open</span>
        </li>
    </ul>
</div>
<div class="vertical-menu" @verticalOpen="openOrClose">
    <div class="list-group table-of-contents">
        <a class="list-group-item" [routerLink]="['/login']" routerLinkActive="active">Login</a>
        <a class="list-group-item" [routerLink]="['/personalArea routerLinkActive="active">Personal Area</a>
    </div>
</div>

ts file

@Component({
   selector:'menu-bar',
   templateUrl:'app/components/menubar/menubar.component.html',
   styleUrls:['app/components/menubar/menubar.component.css'],
   directives:[ROUTER_DIRECTIVES],
   animations:[
       trigger('verticalOpen',[
           state('inactive',style({
               left: '-115px',
               transform:'scale(1)',
               backgroundColor:'red'
           })),
           state('active',style({
               left: '0px',
               transform:'scale(1.3)'
           })),
           transition('active => inactive', animate('100ms ease-in')),
           transition('inactive => active', animate('100ms ease-out'))
       ])
   ]
})
export class MenuBar{
    closeOrOpen:string;
    open(){
        if(this.closeOrOpen=='inactive'){
            this.closeOrOpen='active'
        }
        else if(this.closeOrOpen=='active'){
            this.closeOrOpen='inactive'    
        }
        else{
            this.closeOrOpen='inactive'
        }
        console.log(this.closeOrOpen)
    }
}

so what I'm trying to do is to trigger the change of style with a button but when I click nothing changes. To me looking at the code there are no errors, is it true? What did I miss?