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