Angular 2触发动画

Question

以下文档here我试图在我的应用程序中放入一些动画，但我有一些问题需要理解动画触发器。

HTML组件

<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文件

@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) 
    } 
} 

所以我想要做的是触发的风格，配有按钮的变化，但是当我点击没什么变化。对于我看代码没有错误，这是真的吗？我错过了什么？

Answer 1

在模板中你有：

@verticalOpen="openOrClose" 

因此，在打开的方法，你需要切换openOrClose财产，而不是closeOrOpen。