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。

Angular 2个触发动画

Angular 2 triggering animations

angular

typescript

angular-animations

Html分量

ts 文件