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。