Angular 2 Triggering Animationen

Question

Nach dieser Dokumentation here Ich versuche, einige Animationen in meine Apps zu stellen, aber ich habe ein Problem zu verstehen, die Animationen auszulösen.

Html Komponente

<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 Datei

@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, was ich versuche zu tun, sondern ist die Änderung des Stils mit einer Taste auszulösen, wenn ich nichts ändert klicken. Wenn ich mir den Code anschaue, gibt es keine Fehler, stimmt das? Was habe ich verpasst?

Answer 1

in Ihrer Vorlage Sie haben:

@verticalOpen="openOrClose" 

Also in Ihrem offenen Methode Sie die openOrClose Eigenschaft und nicht die closeOrOpen umschalten müssen.