각형 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을 전환 할 필요가있다.