角度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" 

は、だからあなたのopenメソッドでは、あなたが openOrClose財産ではなく closeOrOpenを切り替える必要があります。